:root{--bg:#fafafa;--surface:#fff;--subtle:#f4f4f5;--border:#e9e9eb;--grid:#f0f0f2;--text:#18181b;--muted:#71717a;--faint:#a1a1aa;--accent:#18181b;--on-accent:#fff;--accent-soft:#18181b26;--good:#2f7d4f;--warn:#a8701a;--bad:#c2413b;--radius:12px;--radius-sm:8px;--shadow-pop:0 8px 28px #0000001a, 0 1px 3px #0000000d;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:system-ui,-apple-system,BlinkMacSystemFont,Inter,PingFang TC,Noto Sans TC,Segoe UI,sans-serif;font-size:15px;line-height:1.5}@media (prefers-color-scheme:dark){:root{--bg:#0b0b0c;--surface:#141416;--subtle:#1c1c1f;--border:#26262a;--grid:#1f1f23;--text:#ececee;--muted:#8e8e96;--faint:#5c5c64;--accent:#ececee;--on-accent:#0b0b0c;--accent-soft:#ececee33;--good:#5cb883;--warn:#d6a24a;--bad:#e2706a;--shadow-pop:0 8px 28px #00000080, 0 0 0 1px var(--border)}}*{box-sizing:border-box}body{background:var(--bg);margin:0}h1,h2{margin:0}h1{letter-spacing:-.01em;font-size:17px;font-weight:600}h2{letter-spacing:-.005em;font-size:15px;font-weight:600}button{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;padding:8px 14px;font-size:14px;font-weight:500;transition:background-color .15s,border-color .15s,color .15s,opacity .15s}button:hover:not(:disabled){background:var(--subtle)}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:disabled{opacity:.35;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}button.primary:hover:not(:disabled){background:var(--accent);opacity:.85}button.danger{color:var(--bad)}button.danger:hover:not(:disabled){background:color-mix(in srgb, var(--bad) 8%, var(--surface))}button.link{color:var(--muted);background:0 0;border:none;padding:4px 0}button.link:hover:not(:disabled){color:var(--text);background:0 0}button.icon{color:var(--faint);background:0 0;border:none;padding:4px 8px;font-size:14px;line-height:1}button.icon:hover:not(:disabled){color:var(--text);background:0 0}input{font:inherit;min-height:42px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;min-width:0;padding:9px 12px;font-size:16px;transition:border-color .15s,box-shadow .15s}input::placeholder{color:var(--faint)}input:focus{border-color:var(--muted);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);outline:none}input[type=date]{appearance:none;text-align:left;display:block}input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}input[type=date]::-webkit-datetime-edit{padding:0}.app{max-width:880px;padding:env(safe-area-inset-top) max(20px, env(safe-area-inset-right)) 96px max(20px, env(safe-area-inset-left));margin:0 auto}.topbar{justify-content:space-between;align-items:center;gap:16px;padding:28px 0 24px;display:flex}.tabs{gap:2px;display:flex}.tabs button{color:var(--muted);background:0 0;border:none;align-items:center;gap:6px;padding:6px 12px;display:flex}.tabs button:hover:not(:disabled){color:var(--text);background:0 0}.tabs button.active{color:var(--text);background:var(--subtle);font-weight:600}.tab-icon{display:none}.tab-icon svg{width:22px;height:22px;display:block}main{display:block}.stack{flex-direction:column;gap:16px;display:flex}.grid{grid-template-columns:repeat(4,1fr);gap:16px;display:grid}.row{align-items:center;display:flex}.gap{gap:10px}.wrap{flex-wrap:wrap}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}.card-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.card>h2{margin-bottom:8px}.stat{flex-direction:column;gap:6px;display:flex}.label{color:var(--muted);font-size:12px}.value{letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-size:28px;font-weight:600;line-height:1.15}.sub{color:var(--muted);font-size:12px}.muted{color:var(--muted)}.good{color:var(--good)}.bad{color:var(--bad)}.pill{border:1px solid;border-radius:999px;align-self:flex-start;padding:1px 8px;font-size:12px;font-weight:500}.pill.ok{color:var(--good)}.pill.warn{color:var(--warn)}.pill.bad{color:var(--bad)}.progress{background:var(--grid);border-radius:999px;height:4px;margin-top:6px;overflow:hidden}.progress>div{background:var(--accent);border-radius:999px;height:100%;transition:width .3s}.progress>div.over{background:var(--bad)}.banner{text-align:left;color:var(--muted);border-radius:var(--radius);border-style:dashed;padding:14px 20px;font-weight:400}.banner:hover:not(:disabled){color:var(--text);background:var(--surface);border-color:var(--muted)}.kcal-row{grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px;display:grid}.kcal-row>div{flex-direction:column;gap:2px;display:flex}.kcal-row strong{letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-size:22px;font-weight:600}.form{flex-direction:column;gap:16px;display:flex}.form>button.primary{align-self:flex-start}.fields{flex-wrap:wrap;gap:12px;display:flex}.fields label{color:var(--muted);flex-direction:column;flex:150px;gap:6px;font-size:12px;display:flex}.fields label.grow{flex:2 220px}.segmented{background:var(--subtle);border-radius:var(--radius-sm);align-self:flex-start;gap:2px;padding:3px;display:inline-flex}.segmented button{color:var(--muted);background:0 0;border:none;border-radius:6px;padding:4px 12px;font-size:13px}.segmented button:hover:not(:disabled){color:var(--text);background:0 0}.segmented button.active,.segmented button.active:hover:not(:disabled){background:var(--surface);color:var(--text);box-shadow:0 1px 2px #0000001a, 0 0 0 1px var(--border)}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{color:var(--muted);border-radius:999px;padding:5px 12px;font-size:13px}.chip:hover:not(:disabled){color:var(--text)}.chip.active,.chip.active:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.date-nav{align-items:center;gap:4px;display:flex}.date-nav input{width:auto}.date-nav button.icon{color:var(--muted);font-size:22px}.date-nav button.link{margin-left:8px}.list{margin:0;padding:0;list-style:none}.list li{border-top:1px solid var(--grid);align-items:center;gap:12px;padding:10px 0;display:flex}.list li:first-child{border-top:none;padding-top:0}.list li>span:first-child{flex:1}.table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;font-size:14px}.table th{text-align:left;color:var(--muted);border-bottom:1px solid var(--border);padding:8px;font-size:12px;font-weight:500}.table td{border-top:1px solid var(--grid);padding:10px 8px}.table tbody tr:first-child td{border-top:none}.table .num{text-align:right}.chart-tip{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);font-variant-numeric:tabular-nums;box-shadow:var(--shadow-pop);padding:8px 12px;font-size:13px;line-height:1.6}.accent{color:var(--accent)}.empty{color:var(--faint);text-align:center;padding:32px 0;font-size:14px}.hint{color:var(--muted);margin:0;font-size:12px}@media (width<=720px){.grid{grid-template-columns:repeat(2,1fr);gap:12px}.stack{gap:12px}.card{padding:16px}.value{font-size:24px}.topbar{padding:20px 0 16px}.app{padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right));padding-bottom:calc(96px + env(safe-area-inset-bottom))}.tabs{background:color-mix(in srgb, var(--surface) 88%, transparent);-webkit-backdrop-filter:saturate(180%)blur(16px);backdrop-filter:saturate(180%)blur(16px);border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:10;justify-content:space-around;position:fixed;bottom:0;left:0;right:0}.tabs button{color:var(--faint);flex-direction:column;gap:3px;padding:4px 8px;font-size:11px}.tabs button.active{color:var(--text);background:0 0}.tab-icon{display:block}.kcal-row strong{font-size:18px}.table td:nth-child(4),.table th:nth-child(4){display:none}}.toast{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-pop);z-index:20;white-space:nowrap;align-items:center;gap:10px;padding:8px 8px 8px 16px;font-size:14px;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}@media (width<=720px){.toast{bottom:calc(76px + env(safe-area-inset-bottom))}}
