/* 視覺升級：溫暖留白、自然色彩與更清晰的資訊層級。 */
:root{--bg:#f7f8f2;--ink:#293c30;--green:#48664b;--muted:#737e6d;--line:#e4e8dc;--light:#edf2e7}
body{background:radial-gradient(ellipse at 90% 0%,#eaf0de80,transparent 38%),var(--bg);font-size:14px;-webkit-font-smoothing:antialiased}
.sidebar{width:236px;padding:35px 20px 24px;background:#fffefb;border-right-color:#e7eadd}
.brand{font-size:24px;gap:10px;padding:0 9px;letter-spacing:2px}.brand-icon{font-size:44px;color:#557149}.brand small{font-size:9px;letter-spacing:3.5px}
.workspace-label{font-size:10px;letter-spacing:.6px;color:#88917f;margin:27px 0 32px}
nav{gap:9px}.nav-item{font-size:13px;padding:15px 16px;border-radius:11px;gap:13px;transition:background .2s,color .2s,transform .2s}.nav-item>span{font-size:21px}.nav-item.active{background:#eaf0e2;color:#47653f;box-shadow:inset 3px 0 #7c9562}.nav-item:hover{transform:translateX(3px);background:#f0f3e9}
.sidebar-note{margin:auto 4px 27px;padding:24px 19px;border:1px solid #e9ecdf;border-radius:16px;background:linear-gradient(145deg,#f5f6e9,#eef2e5);overflow:hidden}.sidebar-note:after{content:'✳';position:absolute;right:-24px;top:13px;font-size:135px;color:#dce5cb70;pointer-events:none}.plant{font-size:44px;position:relative;z-index:1;margin-bottom:13px}.sidebar-note h3{font-size:12px;position:relative;z-index:1}.sidebar-note p{font-size:11px;color:#7d8872}.sidebar-note small{font-size:7px}.sidebar-bottom{font-size:11px;color:#75816d}
.main-shell{margin-left:236px}.topbar{height:76px;padding:0 44px;background:#fffefba6;backdrop-filter:blur(16px)}.breadcrumb{font-size:12px}.topbar-right{gap:20px}.local-badge{font-size:10px;color:#78866e}.avatar{width:36px;height:36px;font-size:13px;background:#e6eddc;border-color:#d8e2cc}
main{max-width:1480px;padding:38px 44px 0}.page-heading{margin-bottom:29px;gap:20px}.eyebrow{font-size:9px;letter-spacing:2.6px;color:#8b9a72;margin-bottom:10px}h1{font-size:clamp(25px,2.25vw,36px);font-weight:600;letter-spacing:.5px;margin:0 0 10px}.page-heading p{font-size:12px;color:#849078;line-height:1.8}.button{padding:11px 17px;font-size:12px;border-radius:9px;min-height:40px;font-weight:500;transition:box-shadow .2s,transform .2s,background .2s}.secondary{background:#fffefb;border-color:#dfe5d5;box-shadow:0 2px 3px #2c3e201f}.primary{background:#49674b;border-color:#49674b;box-shadow:0 4px 10px #4c694627}.primary:hover{background:#36533a;box-shadow:0 6px 14px #4c69463b}.button:hover{transform:translateY(-2px)}
.hero{min-height:314px;border-radius:22px;background:linear-gradient(110deg,#e9eedc 0%,#edf1e5 56%,#dee8cf 100%);border:1px solid #e0e7d2;box-shadow:0 8px 26px #53643f06;isolation:isolate}.hero:before{content:'';width:330px;height:330px;position:absolute;left:34%;top:-235px;border:45px solid #ffffff32;border-radius:50%;pointer-events:none}.hero-content{padding:33px 37px}.hero-label{font-size:11px;letter-spacing:1.3px;color:#6d8159}.hero h2{font-size:clamp(28px,2.5vw,37px);line-height:1.6;font-weight:600;letter-spacing:1px;margin:13px 0 12px;color:#34492e}.hero p{font-size:12px;line-height:1.95;color:#7c8b6b}.hero-foot{font-size:10px;gap:10px;margin-top:21px;color:#6e8358}.mini-leaf{font-size:19px}.plate-scene{width:43%}.plate-scene img{width:272px;height:272px;border:11px solid #fffff4;box-shadow:0 18px 35px #3e502437;transform:rotate(-12deg)}.orbit-one{width:345px;height:345px;right:1%;border-color:#cdd9bb}.orbit-two{width:430px;height:430px;right:-9%;border-color:#d0dbc0}.floating-tag{padding:12px 15px;font-size:11px;border-radius:10px;box-shadow:0 7px 20px #566b3612}.tag-one{left:-7px;top:42px}.tag-two{right:0;bottom:37px}
.age-section,.nutrition-section,.meal-section{margin-top:33px}.section-title{margin-bottom:18px}.section-title h2{font-size:17px;font-weight:600;letter-spacing:.2px;display:flex;align-items:center;gap:10px}.section-title h2>span{order:-1;margin:0;background:#eaf0e1;color:#7f9566;font-size:10px;padding:5px 6px;border-radius:5px;letter-spacing:.7px}.section-title>span{font-size:11px;color:#8d9781}.text-button{font-size:11px;color:#6b8058}.text-button:hover{text-decoration:underline;text-underline-offset:4px}
.age-tabs{gap:13px}.age-tabs button{padding:20px 17px;gap:12px;border-radius:13px;background:#fffefc;border-color:#e2e7da;transition:transform .2s,box-shadow .2s,border-color .2s}.age-tabs button:hover{transform:translateY(-3px);box-shadow:0 7px 18px #4559300b;border-color:#b5c3a0}.age-tabs button.selected{background:linear-gradient(120deg,#edf3e4,#f4f7ee);border:1.5px solid #8ba473;box-shadow:0 4px 12px #5b743211}.age-symbol{height:40px;width:40px;font-size:26px;background:#f1f2e8}.age-tabs strong{font-size:14px;margin-bottom:6px}.age-tabs small{font-size:10px;color:#839076}.age-tabs i{right:11px;top:11px;font-size:9px}.age-tip{margin-top:13px;padding:12px 16px;background:#edf2e5;border-radius:9px;gap:11px}.age-tip p{font-size:11px;color:#7d8d69;line-height:1.9}.age-tip button{font-size:10px;color:#668150}
.metrics{gap:15px;grid-template-columns:1.15fr 1fr 1fr 1fr}.metric{position:relative;overflow:hidden;padding:20px;border-radius:14px;border-color:#e5e9de;background:#fffefc;box-shadow:0 3px 12px #3e552403;transition:transform .2s,box-shadow .2s}.metric:hover{transform:translateY(-3px);box-shadow:0 8px 22px #3e55240c}.metric.energy{background:linear-gradient(130deg,#eef3e5,#e7efda);border-color:#dbe4cb}.metric-label{font-size:12px;gap:7px;color:#748666}.metric-icon{font-size:17px}.badge{font-size:8px;padding:3px 5px;background:#f7faef;border-color:#d5e1c2}.metric-value{gap:9px;margin:16px 0 17px}.metric-value strong{font-size:36px;font-family:Arial,sans-serif;font-weight:500;letter-spacing:-1px;color:#344931;font-variant-numeric:tabular-nums}.metric-value>span{font-size:11px;color:#8b977e}.metric-bottom{font-size:9px;color:#8b987e;gap:5px}.spark{font-size:16px;color:#9db97b}.macro-dot{width:32px;height:5px}.metric:not(.energy):after{content:'';position:absolute;left:20px;right:20px;bottom:0;height:3px;background:#e8cfbb;border-radius:4px 4px 0 0}.metric:nth-child(3):after{background:#e5d69b}.metric:nth-child(4):after{background:#bad4d4}
.meal-title{margin-bottom:21px}.meal-title p{font-size:11px;color:#89957e;margin-top:9px}.meal-actions{gap:10px}.planner-toolbar{padding:14px 18px;border-radius:15px 15px 0 0;background:#fffefa;border-color:#e3e8da}.week-days{gap:7px}.week-days button{font-size:11px;padding:9px 12px;border-radius:7px;color:#89977c;transition:background .2s}.week-days button:hover{background:#f1f5e9}.week-days button.selected{background:#49674b;color:#fff;box-shadow:0 3px 8px #49674b22}.diet-label{font-size:10px;color:#849474}.meal-grid{gap:19px;padding:20px;background:#fffefa;border-color:#e3e8da;border-radius:0 0 15px 15px}.meal-card{border-color:#e4e8dc;border-radius:13px;box-shadow:0 3px 9px #2e452103;transition:box-shadow .25s,transform .25s}.meal-card:hover{transform:translateY(-4px);box-shadow:0 12px 25px #3c542312}.meal-photo{height:186px;background:#e9eedf}.meal-photo img{filter:saturate(.9);transition:transform .6s,filter .4s}.meal-card:hover img{transform:scale(1.06);filter:saturate(1.05)}.meal-type{top:13px;left:13px;font-size:11px;padding:7px 11px;border-radius:7px;backdrop-filter:blur(8px);color:#53654a}.meal-ratio{font-size:10px;bottom:13px;right:13px}.meal-photo:after{inset:40% 0 0;background:linear-gradient(transparent,#20351e40)}.meal-info{padding:18px}.meal-time{font-size:9px;letter-spacing:1.4px;color:#95a087}.meal-info h3{font-size:16px;line-height:1.6;margin:9px 0;color:#34472e;font-weight:600}.meal-desc{font-size:11px;line-height:1.85;min-height:40px;color:#86917b}.meal-nutrients{margin-top:16px;gap:5px}.meal-nutrients strong{font-size:25px;color:#3d5635}.meal-nutrients>span{font-size:10px}.meal-nutrients small{font-size:9px;color:#919b85}.meal-tags{gap:6px;margin-top:13px;flex-wrap:wrap}.meal-tags span{font-size:9px;padding:5px 8px;border-radius:5px;background:#f0f4e9;color:#799065}.meal-card-bottom{margin-top:17px;padding-top:14px;border-color:#edf0e6;gap:6px}.meal-card-bottom button{font-size:11px;color:#70885c;min-height:27px}.meal-card-bottom button:last-child{color:#8d997e}.meal-card-bottom button:hover{color:#395937;text-decoration:underline;text-underline-offset:4px}.plan-summary{padding:17px 20px;margin-top:14px;border-radius:11px;background:#eaf0e0;border:1px solid #e0e8d2;gap:10px}.plan-summary strong{font-size:12px}.summary-check{font-size:10px;padding:4px 6px;background:#dbe7c9}.summary-caption{font-size:9px;color:#8a987a}.plan-summary #plan-total{font-size:10px;color:#7d8c6a}.plan-summary #plan-total b{font-size:18px;color:#496139}
.bottom-grid{gap:20px;margin-top:28px}.water-card,.balance-card{padding:26px;border-radius:15px;box-shadow:0 3px 10px #33452a03}.water-card{background:linear-gradient(110deg,#ffffff,#f4f9f7);border-color:#e1eae2;gap:18px}.water-icon{width:45px;height:45px;font-size:29px;background:#e6f0ed;color:#7aa5a0}.water-card h3,.balance-card h3{font-size:15px;font-weight:600;margin-bottom:9px}.water-card p,.balance-card p{font-size:11px;line-height:1.9;color:#899780}.water-cups{gap:10px;margin:20px 0 13px}.water-cups button{width:27px;height:34px;border-radius:3px 3px 9px 9px;border-color:#cfdfdb;font-size:17px;background:#f5faf8}.water-cups button:hover{transform:translateY(-3px);border-color:#8db4a8}.water-cups button.filled{background:linear-gradient(0deg,#a9cec5,#d8ebe5);border-color:#8ab8aa;color:#628f81}.water-card small{font-size:11px;color:#83a095}.water-card small span{font-size:9px;color:#96a38e}.balance-card{background:linear-gradient(110deg,#f4f2e6,#f5f5ec);border-color:#e8e7d7;position:relative;overflow:hidden}.balance-card:after{content:'✳';position:absolute;font-size:160px;color:#d9ddc348;right:-20px;bottom:-38px;pointer-events:none}.balance-card>*{position:relative;z-index:1}.balance-card .eyebrow{font-size:8px;letter-spacing:2px;color:#a09e7e}.balance-card h3{font-size:17px;color:#6e7957}.food-tags{gap:7px;margin-top:18px;flex-wrap:wrap}.food-tags span{font-size:9px;border-color:#dddfca;border-radius:5px;padding:5px 9px;background:#ffffff55;color:#8b9476}
footer{padding:30px 0 26px;gap:15px;font-size:9px;color:#94a087}.footer-brand{font-size:13px;color:#82966a}.footer-brand small{font-size:9px}footer button{font-size:9px;color:#7e9267}
dialog{border-radius:20px;border-color:#e3e9d8;padding:30px;background:#fffefb;box-shadow:0 30px 110px #1c341c45}dialog::backdrop{background:#24351f70;backdrop-filter:blur(7px)}.dialog-heading h2{font-size:23px;line-height:1.5}.dialog-intro{font-size:12px}.form-grid{gap:19px}label{font-size:12px;gap:9px}input,select{font-size:13px;padding:12px;border-radius:8px;background:#fafbf6}.form-notice{font-size:11px;padding:14px;border-radius:9px;line-height:1.9}#content-body{font-size:13px;line-height:1.95}#content-body h3{font-size:16px}.close{height:33px;width:33px;font-size:24px}.toast{left:calc(50% + 118px);font-size:13px;padding:15px 24px;border-radius:12px;box-shadow:0 8px 28px #344c3040}
@media(min-width:1600px){main{padding-top:44px}.hero{min-height:345px}.hero-content{padding:37px 43px}.hero h2{font-size:39px}.plate-scene img{width:300px;height:300px}.meal-photo{height:214px}.age-section,.nutrition-section,.meal-section{margin-top:37px}}
@media(max-width:1200px){.sidebar{width:208px;padding:31px 15px}.brand{font-size:22px;padding:0 5px;gap:8px}.brand-icon{font-size:40px}.nav-item{font-size:12px;padding:14px 12px}.workspace-label{font-size:9px}.main-shell{margin-left:208px}.topbar{padding:0 30px}main{padding:30px 30px 0}.hero{min-height:285px}.hero-content{padding:28px}.hero h2{font-size:29px}.hero p{font-size:11px}.plate-scene img{width:235px;height:235px}.floating-tag{font-size:9px;padding:10px 11px}.tag-one{left:-17px}.age-tabs{gap:10px}.age-tabs button{padding:17px 12px;gap:9px}.age-symbol{width:33px;height:33px;font-size:23px}.age-tabs strong{font-size:13px}.age-tabs small{font-size:9px}.metrics{gap:11px}.metric{padding:17px 14px}.metric-label{font-size:11px}.metric-value strong{font-size:32px}.metric-bottom{font-size:8px}.spark{display:none}.badge{font-size:7px}.meal-photo{height:161px}.meal-grid{gap:13px;padding:15px}.meal-info{padding:14px}.meal-info h3{font-size:14px}.meal-desc{font-size:10px;min-height:38px}.meal-nutrients small{font-size:8px}.meal-card-bottom button{font-size:10px}.summary-caption{display:none}.plan-summary{padding:15px}.plan-summary #plan-total{font-size:9px}.water-card,.balance-card{padding:22px}.water-icon{display:none}.water-cups{gap:8px}.water-cups button{width:25px}.toast{left:calc(50% + 104px)}}
@media(max-width:950px){.sidebar{width:78px;padding:28px 12px}.brand{padding:0;justify-content:center}.brand>span:last-child,.workspace-label,.sidebar-note,.sidebar-bottom{display:none}.brand-icon{font-size:41px}nav{margin-top:36px}.nav-item{font-size:0;padding:15px 0;justify-content:center}.nav-item>span{font-size:23px}.main-shell{margin-left:78px}main{padding:29px 25px 0}.topbar{padding:0 25px}.page-heading h1{font-size:26px}.page-heading p{font-size:11px}.hero{min-height:280px}.hero-content{padding:28px}.hero h2{font-size:29px}.plate-scene{width:38%}.plate-scene img{width:210px;height:210px}.floating-tag{font-size:8px;padding:9px}.tag-one{left:-22px;top:42px}.tag-two{right:-8px;bottom:33px}.age-tabs button{padding:16px 11px;gap:8px}.age-symbol{display:none}.age-tabs strong{font-size:13px}.age-tabs small{font-size:9px}.badge{display:none}.metric-label{font-size:10px}.metric-value strong{font-size:30px}.metric-value>span{font-size:10px}.metric-bottom{font-size:8px}.meal-photo{height:145px}.meal-info h3{font-size:14px}.meal-nutrients small{display:none}.meal-desc{min-height:38px}.section-title h2{font-size:16px}.bottom-grid{gap:14px}.water-card,.balance-card{padding:21px}.water-cups{gap:7px}.water-cups button{width:24px}.water-card h3,.balance-card h3{font-size:14px}.water-card p,.balance-card p{font-size:10px}.water-card small span{font-size:8px}.plan-summary{flex-wrap:wrap}.plan-summary>.text-button{margin-left:auto}.toast{left:calc(50% + 39px)}footer{flex-direction:column;align-items:flex-start;gap:11px}}
@media(max-width:650px){html{scroll-padding-top:82px}.sidebar{height:65px;width:100%;padding:0 18px;flex-direction:row;align-items:center;border-bottom:1px solid #e1e7d7;box-shadow:0 3px 18px #3f542308}.brand{gap:7px}.brand>span:last-child{display:block;font-size:18px}.brand-icon{font-size:33px}.brand small{font-size:7px;letter-spacing:2.7px}.sidebar nav{margin:0 0 0 auto;display:flex;gap:4px}.nav-item{width:35px;padding:9px 0;border-radius:8px}.nav-item>span{font-size:19px}.nav-item.active{box-shadow:inset 0 -2px #809b64}.main-shell{margin-left:0;padding-top:65px}.topbar{height:49px;padding:0 19px}.breadcrumb{font-size:10px}.breadcrumb span{margin:0 7px}.local-badge{font-size:8px}.topbar-right{gap:10px}.avatar{width:27px;height:27px;font-size:11px}main{padding:26px 18px 0}.page-heading{gap:12px;flex-wrap:wrap;margin-bottom:21px}.page-heading h1{font-size:24px;letter-spacing:-.5px;line-height:1.55}.eyebrow{font-size:8px;letter-spacing:2px}.page-heading p{font-size:11px;line-height:1.9}.page-heading>.button{padding:8px 12px;min-height:35px;font-size:11px;margin-top:0}.hero{min-height:282px;border-radius:18px}.hero-content{padding:26px 22px;max-width:100%}.hero-label{font-size:10px}.hero h2{font-size:27px;line-height:1.65;margin:13px 0 11px;letter-spacing:.5px}.hero p{font-size:11px;line-height:1.95}.hero-foot{font-size:9px;gap:7px;margin-top:20px}.plate-scene{position:absolute;width:190px;right:-110px;top:65px;opacity:.29;z-index:0}.plate-scene img{width:190px;height:190px;border-width:8px}.orbit-one{width:245px;height:245px}.orbit-two{width:295px;height:295px}.floating-tag{display:none}.hero-content{z-index:2}.age-section,.nutrition-section,.meal-section{margin-top:29px}.section-title{margin-bottom:15px;gap:10px}.section-title h2{font-size:15px;gap:8px}.section-title h2>span{font-size:9px;padding:4px 5px}.section-title>span{display:none}.text-button{font-size:10px}.age-tabs{grid-template-columns:1fr 1fr;gap:10px}.age-tabs button{padding:17px 12px;gap:10px;border-radius:12px}.age-symbol{display:grid;width:33px;height:33px;font-size:23px}.age-tabs strong{font-size:13px}.age-tabs small{font-size:9px;white-space:normal;line-height:1.6}.age-tip{padding:12px;gap:8px;align-items:flex-start;border-radius:9px}.age-tip>span{line-height:1.6}.age-tip p{font-size:10px;line-height:1.9}.age-tip button{font-size:9px;align-self:center;padding:3px}.metrics{grid-template-columns:1fr 1fr;gap:11px}.metric{padding:17px 15px;border-radius:12px}.metric-label{font-size:11px;gap:6px}.metric-value{margin:14px 0 15px}.metric-value strong{font-size:33px}.metric-value>span{font-size:10px}.metric-bottom{font-size:8px;white-space:normal;line-height:1.6;min-height:14px}.macro-dot{width:23px;flex-shrink:0}.metric:not(.energy):after{left:15px;right:15px}.badge{display:none}.meal-title{align-items:flex-start;gap:15px}.meal-title p{font-size:10px;margin-top:9px}.meal-actions{width:100%;gap:10px}.meal-actions .button{font-size:11px;padding:9px 14px;min-height:38px}.meal-actions .primary{margin-left:auto}.planner-toolbar{padding:12px;gap:12px;border-radius:13px 13px 0 0}.week-days{width:100%;gap:3px;justify-content:space-between}.week-days button{font-size:10px;padding:9px 8px;border-radius:6px}.diet-label{font-size:9px;padding-left:4px}.meal-grid{grid-template-columns:1fr;padding:13px;gap:17px;border-radius:0 0 13px 13px}.meal-card{border-radius:12px}.meal-photo{height:203px}.meal-info{padding:18px}.meal-time{font-size:9px}.meal-info h3{font-size:17px;margin-top:10px}.meal-desc{font-size:12px;min-height:0;line-height:1.9}.meal-nutrients{margin-top:16px}.meal-nutrients strong{font-size:27px}.meal-nutrients small{display:block;font-size:9px}.meal-nutrients>span{font-size:10px}.meal-tags span{font-size:10px;padding:5px 8px}.meal-card-bottom button{font-size:12px;min-height:30px}.meal-type{font-size:12px;padding:7px 11px}.meal-ratio{font-size:10px}.plan-summary{padding:16px 14px;gap:13px;align-items:center}.plan-summary>div:first-child{gap:8px}.plan-summary strong{font-size:11px}.plan-summary #plan-total{font-size:10px;line-height:1.9}.plan-summary #plan-total b{font-size:18px}.plan-summary>.text-button{font-size:11px}.bottom-grid{grid-template-columns:1fr;gap:15px;margin-top:23px}.water-card,.balance-card{padding:24px;border-radius:13px}.water-card{gap:15px}.water-icon{display:none}.water-card h3,.balance-card h3{font-size:16px}.water-card p,.balance-card p{font-size:11px}.water-cups{gap:10px;margin-top:20px}.water-cups button{width:27px;height:34px}.water-card small{font-size:11px}.water-card small span{font-size:9px}.food-tags{gap:7px}.food-tags span{font-size:9px;padding:5px 8px}footer{padding:25px 0;font-size:8px;line-height:1.8}.footer-brand{font-size:12px}.footer-brand small{font-size:8px}footer button{font-size:8px;margin-left:0}dialog{padding:24px;border-radius:17px;max-width:calc(100% - 28px)}.dialog-heading h2{font-size:21px}.dialog-intro{font-size:11px}.form-grid{gap:15px}.form-grid label{font-size:11px}input,select{padding:10px;font-size:12px;min-height:42px}.form-notice{font-size:10px}.toast{left:50%;font-size:12px;max-width:90%;width:max-content;padding:14px 20px}.button:hover,.nav-item:hover,.age-tabs button:hover,.metric:hover,.meal-card:hover{transform:none}}
@media(max-width:370px){.brand>span:last-child{font-size:16px}.sidebar nav{gap:1px}.nav-item{width:31px}.page-heading h1{font-size:21px}.hero h2{font-size:24px}.age-tabs button{padding:15px 10px;gap:7px}.age-symbol{width:27px;height:27px}.meal-nutrients small{font-size:8px}.water-cups{gap:8px}.water-cups button{width:24px}.section-title h2{font-size:14px}.metric-value strong{font-size:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
@media print{body{background:white;color:#222}.main-shell{margin:0;padding:0}main{padding:0}.meal-section{margin:0}.meal-title{margin-bottom:20px}.meal-title:before{font-size:24px;color:#29432e}.meal-title h2{font-size:17px}.meal-title p{font-size:11px}.meal-grid{padding:0;border:0;gap:12px;grid-template-columns:repeat(3,1fr)}.meal-card{box-shadow:none;transform:none;border-color:#ddd}.meal-photo{height:120px}.meal-info{padding:12px}.meal-info h3{font-size:14px}.meal-desc{font-size:10px}.meal-nutrients small{display:block;font-size:8px}.meal-nutrients strong{font-size:22px}.meal-tags span{font-size:8px}.plan-summary{padding:14px;margin-top:15px}.plan-summary #plan-total{font-size:10px}}