@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;700&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');

:root { --ink:#172522; --muted:#718078; --paper:#f5f0e8; --card:#fffdf9; --line:#d9ddd5; --green:#2e6450; --lime:#bfd98c; --orange:#de805c; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',sans-serif; }
.shell { max-width:1160px; margin:0 auto; padding:38px 30px 72px; }
.hidden { display:none !important; }
.eyebrow,.label { color:var(--muted); font:500 11px 'DM Mono',monospace; letter-spacing:.13em; }
h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(54px,8vw,90px); line-height:.95; letter-spacing:-.055em; margin:26px 0; } h1 em { color:var(--green); font-family:'Playfair Display',serif; font-weight:600; letter-spacing:-.06em; } h2 { font-size:34px; letter-spacing:-.04em; margin:10px 0 0; } h3 { font-size:22px; letter-spacing:-.04em; margin:7px 0 0; }
.auth-layout { min-height:calc(100vh - 110px); display:grid; grid-template-columns:1.15fr .85fr; gap:90px; align-items:center; } .intro-copy { max-width:390px; color:#5e6d65; line-height:1.7; font-size:17px; } .principles { display:grid; grid-template-columns:38px 1fr; max-width:350px; margin-top:55px; gap:14px 10px; border-top:1px solid var(--line); padding-top:18px; } .principles span { color:var(--orange); font:12px 'DM Mono'; } .principles p { color:var(--muted); font-size:13px; margin:0; }
.auth-card,.panel { background:var(--card); border:1px solid rgba(23,37,34,.08); border-radius:5px; box-shadow:0 12px 35px rgba(32,45,39,.05); } .auth-card { padding:30px; max-width:430px; width:100%; justify-self:end; } .tabs,.entry-tabs { display:flex; gap:22px; border-bottom:1px solid var(--line); margin-bottom:27px; } .tab,.entry-tab { border:0; background:none; padding:0 0 13px; color:var(--muted); font:500 13px 'DM Sans'; cursor:pointer; } .tab.active,.entry-tab.active { color:var(--ink); border-bottom:2px solid var(--green); }
label { display:block; color:var(--muted); font-size:12px; margin:0 0 17px; } input { display:block; width:100%; border:1px solid var(--line); border-radius:3px; background:#fff; color:var(--ink); font:15px 'DM Sans'; padding:13px 14px; margin-top:7px; outline:none; } input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(46,100,80,.1); } button { cursor:pointer; } .primary { width:100%; border:0; border-radius:3px; background:var(--green); color:#fff; padding:14px 18px; font-weight:700; text-align:left; margin-top:8px; } .primary span { float:right; font-size:18px; }.form-message { min-height:18px; color:var(--orange); font-size:12px; margin:12px 0 0; }
.remember-login { display:flex; align-items:center; gap:7px; margin:2px 0 10px; }
.remember-login input { width:auto; margin:0; padding:0; }
.topbar { display:flex; justify-content:space-between; align-items:flex-end; border-bottom:1px solid var(--line); padding-bottom:24px; }.quiet { border:1px solid var(--line); background:none; color:var(--muted); border-radius:3px; padding:9px 13px; font-size:12px; }.date-line { color:var(--muted); font:12px 'DM Mono'; padding:17px 0 28px; }.status-dot { color:var(--lime); margin-left:10px; }
.topbar-actions { display:flex; gap:8px; align-items:center; }
.day-nav { border:0; background:none; color:var(--green); font-size:17px; padding:0 8px; }.day-nav:disabled { color:var(--line); cursor:default; }
.summary-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:14px; margin-bottom:14px; }.summary-grid article { min-height:190px; padding:23px; position:relative; border-radius:5px; }.hero-stat { background:var(--green); color:white; }.hero-stat .label { color:#b8cabf; }.hero-stat strong,.small-stat strong { display:block; font:600 61px 'Playfair Display',serif; line-height:1.2; margin-top:15px; }.hero-stat span:not(.label),.small-stat span:not(.label) { color:var(--muted); font-size:13px; }.hero-stat span:not(.label) { color:#b8cabf; }.stat-rule { height:5px; background:#527967; margin:22px 0 12px; }.stat-rule i { display:block; height:100%; width:20%; background:var(--lime); }.hero-stat small { color:#c9d7cf; font-size:11px; }.small-stat { background:var(--card); border:1px solid rgba(23,37,34,.08); }.small-stat strong { font-size:45px; margin-top:22px; }.accent { position:absolute; right:22px; top:20px; color:var(--orange); font-size:23px; }.content-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.panel { padding:24px; margin-bottom:14px; }.panel-heading { display:flex; justify-content:space-between; align-items:start; margin-bottom:24px; }.entry-form { max-width:500px; }.log-list { display:flex; flex-direction:column; gap:11px; }.log-item { display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid #edf0eb; font-size:14px; }.log-item small { color:var(--muted); display:block; font-size:11px; margin-top:4px; }.log-item b { color:var(--green); font:500 13px 'DM Mono'; }.count { background:var(--lime); border-radius:20px; padding:5px 10px; font:12px 'DM Mono'; }.empty,.muted { color:var(--muted); font-size:13px; }.weight-history { display:flex; gap:10px; align-items:end; min-height:100px; }.weight-bar { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; }.weight-bar i { display:block; width:100%; max-width:52px; background:var(--lime); min-height:12px; border-radius:2px 2px 0 0; }.weight-bar small { color:var(--muted); font:10px 'DM Mono'; }.weight-bar b { font:11px 'DM Mono'; }
@media(max-width:760px) { .shell { padding:25px 17px 45px; }.auth-layout { display:block; min-height:0; }.intro { margin:45px 0 45px; }.auth-card { max-width:none; }.summary-grid,.content-grid { grid-template-columns:1fr; }.summary-grid article { min-height:150px; }.hero-stat strong { font-size:52px; }.topbar { align-items:start; }.topbar h2 { font-size:28px; }.topbar .quiet { margin-top:15px; } }

.summary-grid { grid-template-columns: 2fr repeat(3, 1fr); }
.profile-form { display:grid; grid-template-columns:repeat(3, 1fr); gap:0 16px; }
.profile-form .primary,.profile-form .form-message { grid-column:1 / -1; }
.integration-box { border-top:1px solid #edf0eb; margin-top:18px; padding-top:15px; }
.integration-box .form-message { overflow-wrap:anywhere; }
.account-actions { border-top:1px solid #edf0eb; margin-top:18px; padding-top:15px; }
.danger-button { border:0; background:none; color:var(--orange); padding:0; font-size:11px; }
.group-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.group-actions form { display:flex; gap:8px; }
.group-actions input { margin:0; min-width:0; }
.group-actions .quiet { white-space:nowrap; }
.group-list { display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.group-card { border-top:1px solid #edf0eb; padding-top:15px; }
.group-card-head { display:flex; justify-content:space-between; gap:20px; }
.group-card b { display:block; font-size:15px; }
.group-card small { display:block; color:var(--muted); font-size:11px; margin-top:4px; }
.group-card code { color:var(--green); font-family:'DM Mono'; }
.sharing { display:flex; gap:12px; color:var(--muted); font-size:11px; }
.sharing label { margin:0; white-space:nowrap; }
.sharing input { display:inline; width:auto; margin:0 4px 0 0; padding:0; }
.member-list { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.member-list span,.member-chip { background:#f0f2ec; border:0; border-radius:20px; padding:6px 9px; font-size:11px; color:#596860; }
.member-chip:not(:disabled):hover { background:var(--lime); color:var(--ink); }
.member-chip:disabled { cursor:not-allowed; opacity:.7; }
@media(max-width:760px) { .summary-grid,.profile-form { grid-template-columns:1fr; } }
@media(max-width:760px) { .badge-list { grid-template-columns:1fr; } .gamification-tile button { grid-template-columns:auto 1fr auto; }.gamification-tile small { grid-column:2 / -1; } }
@media(max-width:760px) { .group-actions { grid-template-columns:1fr; }.group-card-head { display:block; }.sharing { margin-top:12px; } }

select { display:block; width:100%; border:1px solid var(--line); border-radius:3px; background:#fff; color:var(--ink); font:15px 'DM Sans'; padding:13px 14px; margin-top:7px; }
.wizard-head { display:flex; justify-content:space-between; align-items:start; gap:20px; }
.wizard-copy { color:var(--muted); font-size:13px; line-height:1.6; max-width:540px; }
.wizard-fields { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.estimate-result { display:flex; flex-direction:column; background:#eef3e8; color:var(--green); padding:16px; margin-top:16px; border-left:4px solid var(--lime); }
.estimate-result strong { font:600 34px 'Playfair Display',serif; }
.estimate-result span { font-size:13px; }
.estimate-result small { color:var(--muted); margin-top:7px; }
dialog { border:0; border-radius:6px; padding:28px; width:min(680px, calc(100% - 30px)); color:var(--ink); box-shadow:0 20px 80px rgba(23,37,34,.25); }
dialog::backdrop { background:rgba(23,37,34,.42); }
@media(max-width:760px) { .wizard-fields { grid-template-columns:1fr; } dialog { padding:20px; } }
.analyze-button { margin: -6px 0 16px; }
.photo-label { border-top:1px solid #edf0eb; padding-top:15px; }
.photo-label input { padding:10px; font-size:12px; }
.macro-fields { display:grid; grid-template-columns:repeat(3,1fr); gap:0 12px; }
.food-suggestion { display:flex; flex-direction:column; gap:6px; background:#eef3e8; color:var(--green); padding:15px; margin:0 0 18px; border-left:4px solid var(--lime); }
.food-suggestion strong { font-size:15px; }
.food-suggestion span,.food-suggestion small { color:var(--muted); font-size:12px; line-height:1.5; }
.food-suggestion .quiet { align-self:flex-start; margin-top:5px; }
@media(max-width:760px) { .macro-fields { grid-template-columns:1fr; } }

/* Keep the daily action above infrequent settings and sharing controls. */
#app-view { display:flex; flex-direction:column; }
#app-view .topbar { order:1; }
#app-view .date-line { order:2; }
#app-view .summary-grid { order:3; }
#app-view .gamification-tile { order:4; }
#app-view .content-grid { order:4; }
#app-view .progress-panel { order:5; }
#app-view .profile-panel { order:6; }
#app-view .groups-panel { order:7; }

/* Food capture reads as: input, analyze, review, edit, save. */
.entry-form { display:flex; flex-direction:column; }
.flow-hint { color:var(--muted); font-size:12px; line-height:1.5; margin:-12px 0 20px; }
.entry-form #entry-description-label { order:1; }
.entry-form #analyze-food { order:2; }
.entry-form #food-photo-label { order:3; }
.entry-form #analyze-image { order:4; }
.entry-form #food-suggestion { order:5; }
.entry-form #entry-calories-label { order:6; }
.entry-form #macro-fields { order:7; }
.entry-form #entry-minutes-label,.entry-form #entry-weight-label,.entry-form #entry-fat-label { order:6; }
.entry-form > button[type="submit"] { order:8; }
.entry-form > .form-message { order:9; }
.weight-chart svg { display:block; width:100%; height:auto; min-height:180px; background:#f7f8f3; border-radius:4px; }
.weight-line { fill:none; stroke:var(--green); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.weight-point { fill:var(--green); stroke:var(--card); stroke-width:3; }
.start-guide { stroke:#9baa9f; stroke-width:1.5; stroke-dasharray:5 5; }
.goal-guide { stroke:var(--orange); stroke-width:1.5; stroke-dasharray:5 5; }
.guide-label { fill:var(--muted); font:11px 'DM Mono'; text-anchor:end; }
.weight-chart-legend { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:10px; color:var(--muted); font-size:11px; }
.weight-chart-legend i { display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:50%; background:var(--green); }
.weight-chart-legend .legend-start { background:#9baa9f; }
.weight-chart-legend .legend-goal { background:var(--orange); }
.log-item { width:100%; border:0; background:none; color:var(--ink); text-align:left; cursor:pointer; }
.log-item:hover { background:#f7f8f3; }
#settings-view { max-width:1160px; margin:0 auto; padding:38px 30px 72px; }
#settings-content .profile-panel,#settings-content .groups-panel { display:block; }
.account-form { display:grid; grid-template-columns:repeat(3, 1fr); gap:0 16px; padding:16px 0; border-bottom:1px solid #edf0eb; }
.account-form:last-child { border-bottom:0; }
.account-form button,.account-form .form-message { align-self:end; margin-bottom:17px; }
.entry-detail-content { background:#f3f4ef; border-left:4px solid var(--lime); padding:16px; margin:8px 0 18px; }
.entry-detail-content strong { color:var(--green); font-size:16px; }
.entry-detail-content p { color:var(--muted); font-size:13px; margin:8px 0 4px; }
.entry-detail-content small { color:var(--muted); font-size:11px; }
@media(max-width:760px) { #settings-view { padding:25px 17px 45px; }.account-form { grid-template-columns:1fr; }.account-form button,.account-form .form-message { margin-bottom:0; } .topbar-actions { flex-wrap:wrap; justify-content:flex-end; } }
.gamification-tile button { width:100%; display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:8px 14px; padding:14px 18px; text-align:left; border:1px solid rgba(23,37,34,.08); border-radius:5px; background:var(--card); color:var(--ink); box-shadow:0 8px 25px rgba(32,45,39,.04); }
.gamification-tile { margin-bottom:14px; }
.gamification-tile button:hover { border-color:var(--lime); }
.gamification-tile strong { font-size:14px; }
.gamification-tile small { color:var(--muted); font-size:11px; }
.tile-arrow { color:var(--green); font-size:20px; }
.badge-list { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.badge { display:flex; gap:10px; align-items:flex-start; background:#f3f4ef; border:1px solid transparent; border-radius:4px; padding:12px; opacity:.62; }
.badge.unlocked { background:#eef3e8; border-color:#dce8cb; opacity:1; }
.badge-mark { display:grid; place-items:center; flex:0 0 25px; height:25px; border-radius:50%; background:#dfe3db; color:var(--muted); font-weight:700; }
.badge.unlocked .badge-mark { background:var(--lime); color:var(--green); }
.badge b,.badge small { display:block; }
.badge b { color:var(--green); font-size:12px; }
.badge small { color:var(--muted); font-size:10px; line-height:1.4; margin-top:3px; }
.badge-progress { height:3px; background:#dfe3db; margin-top:8px; }
.badge-progress i { display:block; height:100%; background:var(--green); }
.shared-charts { display:grid; gap:14px; }
.shared-chart { border-top:1px solid #edf0eb; padding-top:15px; }
.chart-heading { display:flex; justify-content:space-between; color:var(--green); font-size:13px; margin-bottom:12px; }
.chart-heading small,.chart-labels small { color:var(--muted); font-size:10px; font-weight:400; }
.activity-bars { display:flex; align-items:end; gap:5px; min-height:115px; overflow-x:auto; }
.activity-bar { flex:1; min-width:18px; display:flex; flex-direction:column; align-items:center; gap:5px; }
.activity-bar i { display:block; width:100%; max-width:24px; min-height:8px; background:var(--lime); border-radius:2px 2px 0 0; }
.activity-bar small { color:var(--muted); font:10px 'DM Mono'; }
.line-chart svg { display:block; width:100%; height:130px; background:#f7f8f3; border-radius:3px; }
.line-chart polyline { fill:none; stroke:var(--green); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.chart-labels { display:flex; flex-wrap:wrap; gap:5px 12px; margin-top:8px; }