:root{--bg:#f7f8f7;--paper:#fff;--ink:#191c19;--muted:#737873;--line:#e9ece7;--green:#d6f583;--sage:#f1f7e7;--accent-text:#333d23;--accent-hover:#c6e571;--button-text:#1a2114;--ring-color:#9ebc60;--dark-btn:#20251c;--subtle-bg:#f8faf5;--soft-bg:#edf0e8;--active-bg:#edf5dd;--secondary-text:#687062;--chart-accent:#a9c567;--chart-bar:#d9eab8;--nav-bg:#ffffffed}
html[data-theme=pink]{--bg:#fff6fa;--paper:#fff;--ink:#36232e;--muted:#8a7480;--green:#f3b8d0;--button-text:#482137;--accent-hover:#e9a5c1;--ring-color:#dd8db0;--dark-btn:#a15076}
html[data-theme=black]{--bg:#101110;--paper:#1c1e1c;--ink:#f3f5ef;--line:#30332f;--muted:#a3aaa0;--green:#d6f583;--button-text:#1a2114;--ring-color:#c0df7f;--dark-btn:#b8d97a;--accent-text:#d6e7ba;--accent-hover:#c4df8e;--soft-bg:#30362a;--active-bg:#2e3823;--nav-bg:#1c1e1cf2;--subtle-bg:#252922}
body{font-size:14px;letter-spacing:-.2px}.app-shell{max-width:1250px;grid-template-columns:190px minmax(0,1fr)}.sidebar{padding:30px 18px}.sidebar-label,.sidebar-note{display:none}.desktop-nav{margin-top:40px}.nav-item{font-size:13px}.nav-item.active,.nav-item:hover{color:var(--ink);background:var(--active-bg)}.brand{font-size:23px;color:var(--ink)}.brand-track{color:inherit;font-weight:700}.brand-mark{border-radius:50%;background:var(--green);color:var(--button-text);transform:none}.topbar{height:72px;padding:0 32px}.content{padding:28px 32px 0;max-width:1020px}.page-heading{margin-bottom:22px}.page-heading h1{font-size:29px;letter-spacing:-1.1px}.page-heading p{font-size:12px}.eyebrow{font-size:10px;letter-spacing:.4px;color:var(--muted)}.diary-grid{grid-template-columns:minmax(0,1fr) 230px;gap:22px}.date-section{margin:0 0 20px}.date-heading>strong{font-size:13px}.date-controls{gap:9px}.date-controls .text-btn{font-size:11px;color:var(--muted)}.date-button{min-height:65px;border-radius:14px}.date-button.active{background:var(--green);color:var(--button-text);box-shadow:none}.date-button span{font-size:11px}.date-button strong{font-size:17px}.date-button:hover{background:var(--active-bg)}.balance-card{border:1px solid var(--line);box-shadow:none;border-radius:22px;background:var(--paper);overflow:visible}.balance-top{padding:18px 21px 0;font-size:12px;color:var(--muted)}.tiny-spark{display:none}.balance-body{flex-direction:row-reverse;justify-content:space-between;padding:12px 22px 20px;gap:12px}.calorie-ring{width:112px;height:112px}.ring-copy svg{display:none}.ring-copy strong{font-size:22px;letter-spacing:-.7px}.ring-copy>span{font-size:8px}.macro-summary{flex:1;max-width:none}.remaining>span{font-size:13px;color:var(--muted)}.remaining>strong{font-size:42px;letter-spacing:-1.7px;margin:8px 0 0}.remaining small{font-size:12px;color:var(--muted)}.balance-footer{display:none}#macro-bars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 16px 16px}.macro-row{padding:13px 11px;border:1px solid var(--line);border-radius:15px;margin:0;min-width:0;background:var(--subtle-bg)}.macro-label{display:block;margin:0 0 10px;font-size:12px}.macro-label>span:first-child{margin-bottom:6px;gap:5px}.macro-label>span:last-child{font-size:10px;color:var(--muted)}.macro-label b{color:var(--ink);font-size:16px}.macro-track{height:4px}.macro-dot{width:7px;height:7px}.meal-section{margin-top:26px}.section-heading h2{font-size:17px;letter-spacing:-.6px}.section-heading .text-btn{font-size:12px}.meal-card{border-radius:18px;padding:16px;margin-bottom:10px}.meal-topline{margin-bottom:9px;font-size:10px}.meal-category{color:var(--muted)}.meal-info h3{font-size:13px}.meal-details{font-size:10px;max-width:215px}.meal-macros{gap:5px}.macro-chip{font-size:9px;background:transparent;padding:0 4px 0 0}.chip-p{color:#bb6a8b}.chip-f{color:#6795bf}.chip-c{color:#bb924e}.food-thumb,.food-thumb svg{width:64px;height:64px}.meal-calories strong{font-size:20px;color:var(--ink)}.meal-calories>span{font-size:10px;color:var(--muted)}.meal-edit{display:none}.primary-btn,.secondary-btn,.dark-btn{font-size:12px;min-height:45px;border-radius:14px}.primary-btn{box-shadow:none}.secondary-btn{background:var(--paper)}.primary-btn:hover{background:var(--accent-hover)}.camera-card{padding:22px;background:var(--paper);border:1px solid var(--line)}.camera-art{height:125px}.camera-card h2{font-size:20px;letter-spacing:-.8px}.camera-card p{font-size:12px;color:var(--muted);line-height:1.7}.mini-label{display:none}.camera-caption{font-size:10px;color:var(--muted)}.dark-btn{background:var(--green);color:var(--button-text)}.dark-btn:hover{background:var(--accent-hover)}.water-card{box-shadow:none}.water-total>span{font-size:10px;color:var(--muted)}.water-plus{font-size:12px}.tip-card{display:none}.local-note{font-size:10px}.app-footer{font-size:10px}.topbar-path strong{color:var(--ink)}.prototype-badge{font-size:10px;color:var(--muted)}.theme-picker summary{font-size:11px}.profile small{font-size:9px}.trial-banner{background:var(--paper);padding:12px 15px;border-radius:15px}.trial-banner strong{font-size:12px}.trial-banner p{font-size:10px}.trial-banner>span{font-size:9px;white-space:nowrap}.settings-card p,.about-prototype{font-size:12px}.settings-card label{font-size:12px}.goals-fields input{font-size:15px}.stat-card>span,.stat-card small{font-size:11px}.chart-card p{font-size:12px}.chart-day-label,.chart-value{font-size:10px}
dialog{background:var(--paper);border-radius:25px;max-width:580px}.modal-header{padding:21px 24px}.modal-header h2{font-size:22px}.modal-body{padding:22px 24px}.modal-body label{font-size:12px;color:var(--ink)}.modal-body input,.modal-body select{font-size:14px;height:44px}.photo-intro{text-align:center;padding:5px 25px 18px}.photo-intro h3{font-size:23px;letter-spacing:-.8px;margin:8px 0}.photo-intro p{font-size:13px;color:var(--muted);margin:0;line-height:1.7}.scan-symbol{display:grid;place-items:center;margin:auto;width:60px;height:60px;background:var(--active-bg);color:var(--accent-text);border-radius:20px;font-size:44px;font-family:system-ui}.photo-actions{display:grid;grid-template-columns:1fr;gap:8px}.photo-actions #open-camera{background:var(--green);color:var(--button-text);border:0;font-size:14px;min-height:50px}.gallery-choice{font-size:12px;color:var(--ink)}.photo-note{font-size:10px;text-align:center}.photo-note button{font-size:10px}.manual-entry{display:block;margin:12px auto 18px;padding:10px;font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:4px}.ai-controls{display:block}.ai-controls p{font-size:11px;line-height:1.7}.ai-controls #analyze-photo{font-size:11px;margin-bottom:8px}.photo-upload{width:105px;height:120px;background:var(--subtle-bg);border-color:var(--line)}.photo-upload input{height:100%}.photo-and-title{margin-bottom:18px}.two-cols label{font-size:11px}.ai-result{padding:15px}.ai-result strong{font-size:13px}.ai-result>span,.ai-result ul{font-size:11px}.input-tabs button{font-size:11px}.ingredient-labels{font-size:11px}.ingredient-row{grid-template-columns:minmax(0,1fr) 85px 24px;align-items:center;gap:8px;margin-bottom:12px}.ingredient-row.recognized{border:1px solid var(--line);border-radius:14px;padding:12px}.recognized-name{min-width:0}.recognized-name strong{display:block;font-size:13px;line-height:1.4;overflow-wrap:anywhere}.recognized-name small{font-size:9px;color:var(--muted);display:block;line-height:1.5;margin-top:4px}.weight-field{position:relative}.weight-field input{width:100%;padding:0 24px 0 9px}.weight-field>span{position:absolute;right:8px;top:13px;font-size:11px;color:var(--muted)}.field-hint{font-size:10px}.meal-preview{background:var(--subtle-bg)}.meal-preview>span,.meal-preview>div{font-size:12px}.meal-preview>strong{font-size:12px}.meal-preview>strong b{font-size:26px}.form-error{font-size:12px;line-height:1.7;color:#bd5555}.modal-footer{padding:16px 24px}.modal-footer .primary-btn{font-size:13px}.photo-intro{display:none}#meal-form[data-entry=photo] .photo-intro{display:block}#meal-form[data-entry=photo] .meal-basics,#meal-form[data-entry=photo] .input-tabs,#meal-form[data-entry=photo] #products-panel,#meal-form[data-entry=photo] #custom-panel,#meal-form[data-entry=photo] .meal-preview,#meal-form[data-entry=photo] .modal-footer{display:none}#meal-form[data-entry=photo] .photo-and-title{justify-content:center}#meal-form[data-entry=photo]:not(:has(#photo-preview:not([hidden]))) .photo-and-title{display:none}#meal-form[data-entry=photo]:not(:has(#photo-preview:not([hidden]))) #analyze-photo{display:none}#meal-form[aria-busy=true] .photo-intro,#meal-form[aria-busy=true] #manual-entry,#meal-form[aria-busy=true] .ai-controls{display:none}#meal-form[data-entry=review] .manual-entry{display:none}#analysis-state{text-align:center;padding:20px 10px}#analysis-state strong{display:block;font-size:16px}#analysis-state p{font-size:12px;color:var(--muted)}.loader{display:block;width:32px;height:32px;border:3px solid var(--line);border-top-color:var(--ring-color);border-radius:50%;margin:0 auto 14px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1000px){.diary-grid{grid-template-columns:minmax(0,1fr)}.right-rail{display:block}.camera-card{display:none}.water-card{margin-top:0}.content{max-width:720px}.right-rail{margin-top:0}.water-card .water-cups{max-width:300px}.water-card .water-controls{max-width:300px}.water-total{margin-top:10px}}
@media(max-width:700px){.app-shell{display:block}.sidebar{display:none}.topbar{height:62px;padding:0 20px;border-bottom:0}.topbar-path:before{color:var(--ink);font-size:23px;letter-spacing:-1px}.topbar-actions{gap:10px}.prototype-badge{font-size:8px;padding:4px 8px;max-width:130px}.content{padding:8px 18px 0}.page-heading{margin-bottom:14px}.page-heading h1{font-size:23px;margin:6px 0 0}.page-heading p,#page-diary .page-heading h1,#page-diary .page-heading p{display:none}.page-heading .eyebrow{font-size:11px}.date-heading{margin-bottom:5px}.date-section{margin-bottom:15px}.date-button{min-height:62px;gap:3px}.date-button strong{font-size:16px}.date-button span{font-size:10px}.balance-top{padding:17px 18px 0}.balance-body{padding:10px 20px 17px;flex-direction:row-reverse;gap:12px}.calorie-ring{width:103px;height:103px}.ring-copy strong{font-size:23px}.ring-copy>span{font-size:8px}.remaining>strong{font-size:40px;margin-top:8px}.remaining>span{font-size:12px}.remaining small{font-size:10px}.balance-top .text-btn{font-size:10px}#macro-bars{gap:7px;padding:0 12px 13px}.macro-row{padding:11px 9px;border-radius:13px}.macro-label{font-size:11px}.macro-label b{font-size:16px}.macro-label>span:last-child{font-size:9px}.meal-section{margin-top:23px}.section-heading{margin-bottom:12px}.section-heading h2{font-size:17px}.section-heading .text-btn{font-size:11px}.meal-card{padding:13px}.food-thumb,.food-thumb svg{width:59px;height:59px}.meal-info h3{font-size:12px}.meal-details{font-size:9px;max-width:165px}.macro-chip{font-size:9px}.meal-card-body{gap:11px}.meal-topline{font-size:9px}.meal-calories strong{font-size:19px}.meal-calories>span{font-size:9px}.mobile-nav{left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));border:1px solid var(--line);box-shadow:0 6px 30px #0000000a;border-radius:23px;padding:10px;gap:4px}.mobile-nav button{min-width:50px;font-size:9px;color:var(--muted)}.mobile-nav button.active{color:var(--ink)}.mobile-nav .mobile-add{order:5;border-radius:17px;width:52px;height:52px;background:var(--green);color:var(--button-text);box-shadow:none}.mobile-nav svg{width:22px;height:22px}.app-footer{padding-bottom:120px}.right-rail{margin-top:0}.water-card{padding:18px}.water-card h2{font-size:15px}.water-card .water-cups{max-width:none}.water-card .water-controls{max-width:none}.local-note{font-size:9px}.trial-banner{margin:2px 0 16px}.trial-banner p{font-size:10px}.trial-banner>span{display:none}dialog{width:calc(100% - 20px);max-height:94dvh;border-radius:23px}.modal-header{padding:18px}.modal-body{padding:18px}.modal-header h2{font-size:21px}.modal-footer{padding:15px 18px}.modal-body input,.modal-body select{font-size:12px}.photo-upload{width:80px;height:115px}.photo-and-title{gap:12px}.recognized-name strong{font-size:12px}.ingredient-row.recognized{padding:10px;grid-template-columns:minmax(0,1fr) 74px 20px}.ingredient-row{grid-template-columns:minmax(0,1fr) 74px 20px}.meal-preview{padding:15px}.photo-intro h3{font-size:23px}.photo-intro{padding:5px 6px 20px}.modal-header .eyebrow{font-size:9px}.custom-grid{gap:12px}.theme-menu button{font-size:13px}}
@media(max-width:360px){.content{padding-left:13px;padding-right:13px}.remaining>strong{font-size:35px}.calorie-ring{width:92px;height:92px}.balance-body{padding-left:17px;padding-right:17px}.macro-row{padding:10px 7px}.macro-label{font-size:10px}.macro-label>span:last-child{font-size:8px}.food-thumb,.food-thumb svg{width:48px;height:48px}.meal-info h3{font-size:11px}.meal-details{max-width:130px}.meal-card-body{gap:8px}.macro-chip{font-size:8px}.topbar{padding:0 14px}.prototype-badge{font-size:7px;max-width:115px}.topbar-path:before{font-size:21px}.photo-and-title{flex-direction:column}.photo-upload{width:100%;height:130px}.recognized-name small{font-size:8px}.ingredient-row{gap:5px}.ingredient-row select{font-size:10px}}
#meal-form[data-entry=review] .photo-actions,#meal-form[data-entry=review] .photo-note,#meal-form[data-entry=review] .ai-controls p{display:none}#meal-form[data-entry=review] .ai-controls{margin:0 0 12px}#meal-form[data-entry=review] .ai-controls #analyze-photo{min-height:32px;font-size:10px;padding:0 12px;margin-bottom:0}#meal-form[data-entry=review] .ai-result ul{margin-bottom:0}.trial-banner{margin-bottom:18px}.trial-banner p{margin:5px 0 0;line-height:1.6}
@media(prefers-reduced-motion:reduce){.loader{animation:none}}

.mobile-nav .mobile-add{gap:3px}.mobile-nav .mobile-add>span{font-size:8px;line-height:1.1;font-weight:700}.mobile-nav .mobile-add svg{width:23px;height:23px}

/* Keep the theme label visible beside the palette on every screen. */
.theme-picker summary{white-space:nowrap;min-height:32px}.theme-summary-label{display:inline}.palette-icon{flex-shrink:0}
@media(max-width:700px){.topbar{height:auto;min-height:62px;flex-wrap:wrap;gap:8px 12px;padding-top:12px;padding-bottom:12px}.topbar-actions{flex-wrap:wrap;justify-content:flex-end;max-width:100%;gap:6px 10px;margin-left:auto}.theme-picker summary{font-size:11px}}

.data-actions{display:flex;gap:10px;flex-wrap:wrap}.data-actions button{min-width:135px}
