:root { --ink:#19352d; --muted:#68766f; --paper:#f8f6ef; --card:#fffefa; --mint:#cde9cf; --lime:#b8e36b; --coral:#ed755d; --line:#e6e4db; --shadow:0 10px 30px rgba(31,54,45,.08); }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif; padding-bottom:88px; }
button,input,textarea,select { font:inherit; } button { cursor:pointer; } .app-shell { width:min(100%,720px); margin:auto; padding:28px 18px 24px; } .topbar,.date-row,.hero-heading,.hero-meta,.section-heading,.calorie-card,.modal-header,.chart-title { display:flex; align-items:center; justify-content:space-between; } h1,h2,h3,p { margin:0; } h1 { font-size:28px; letter-spacing:-.8px; } h2 { font-size:21px; letter-spacing:-.5px; } h3 { font-size:16px; } .eyebrow { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:1.2px; } .icon-button,.date-shift,.close-button { border:0; background:transparent; color:var(--ink); font-size:24px; } .icon-button { width:42px; height:42px; border-radius:50%; background:#eae9df; }
.date-row { margin:25px 0 18px; justify-content:center; gap:17px; } .date-display { border:0; background:transparent; color:var(--ink); font-size:14px; font-weight:700; min-width:146px; } .date-shift { font-size:31px; line-height:1; }
.hero-card,.metric-card,.calorie-card,.form-card,.analysis-card,.chart-card,.adjustment-card { background:var(--card); border:1px solid rgba(25,53,45,.06); border-radius:20px; box-shadow:var(--shadow); } .hero-card { padding:23px; background:var(--ink); color:#fbfaf3; } .hero-heading p { font-size:13px; color:#b4c5ba; font-weight:700; } .hero-heading strong { display:block; margin-top:2px; font-size:45px; letter-spacing:-2px; } small { font-size:.45em; letter-spacing:0; } .pace-badge { padding:7px 10px; color:var(--ink); background:var(--lime); border-radius:999px; font-size:11px; font-weight:800; } .progress-track { height:8px; margin:20px 0 13px; border-radius:999px; overflow:hidden; background:#436255; } .progress-fill { width:0%; height:100%; background:var(--lime); border-radius:inherit; transition:width .3s; } .hero-meta { gap:7px; font-size:11px; color:#b4c5ba; } .hero-meta b { color:#fff; }
.metric-grid,.analysis-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:13px 0 30px; } .metric-card,.analysis-card { padding:17px; min-height:121px; } .metric-card>span,.analysis-card>span { display:block; color:var(--muted); font-size:12px; font-weight:700; } .metric-card strong,.analysis-card strong { display:block; font-size:27px; letter-spacing:-1px; margin:8px 0 5px; } .metric-card p,.analysis-card p { color:var(--muted); font-size:11px; line-height:1.45; }
.section-heading { margin:26px 0 13px; } .section-heading.compact { margin-top:30px; } .text-button { border:0; background:transparent; color:#3b765d; font-weight:800; font-size:13px; } .calorie-card { padding:20px; gap:20px; } .calorie-ring { width:126px; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--lime) 0deg, #edf0e8 0deg); position:relative; } .calorie-ring:before { content:""; width:103px; aspect-ratio:1; background:var(--card); border-radius:50%; position:absolute; } .calorie-ring div { z-index:1; text-align:center; } .calorie-ring span,.calorie-ring small { color:var(--muted); font-size:10px; font-weight:700; } .calorie-ring strong { display:block; font-size:25px; letter-spacing:-1px; line-height:1.1; } .calorie-summary { flex:1; } .calorie-summary p { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding:8px 0; color:var(--muted); font-size:12px; } .calorie-summary b { color:var(--ink); font-size:15px; } .calorie-summary .difference { display:block; border:0; font-weight:700; line-height:1.35; } .difference.over { color:#c65343; } .difference.under { color:#37745e; }
.macro-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; } .macro-card { padding:12px; background:#edeee6; border-radius:14px; } .macro-card span { display:block; font-size:11px; font-weight:800; } .macro-card b { display:block; margin:5px 0; font-size:14px; } .macro-card p { color:var(--muted); font-size:10px; } .mini-track { height:4px; border-radius:10px; background:#d6d9d2; overflow:hidden; margin-top:8px; } .mini-track i { display:block; height:100%; background:#5c9874; border-radius:inherit; }
.meal-list { display:grid; gap:8px; } .meal-row { padding:13px 15px; background:var(--card); border:1px solid var(--line); border-radius:14px; display:grid; grid-template-columns:44px 1fr auto 24px; gap:10px; align-items:center; } .meal-type { color:#38705a; font-size:11px; font-weight:800; } .meal-name { font-size:13px; font-weight:700; } .meal-macros { color:var(--muted); font-size:10px; margin-top:3px; } .meal-cal { font-weight:800; font-size:13px; } .delete-meal { border:0; background:transparent; color:#aaaca6; font-size:18px; }.empty { padding:22px; text-align:center; color:var(--muted); background:#efeee7; border-radius:14px; font-size:13px; }
.view { display:none; }.view.active { display:block; }.chart-card,.adjustment-card { padding:18px; margin:13px 0; }.chart-title span { color:var(--muted); font-size:11px; }.bar-chart { height:168px; display:flex; align-items:end; gap:7px; border-bottom:1px solid var(--line); padding-top:18px; }.bar-day { flex:1; display:flex; height:100%; flex-direction:column; align-items:center; justify-content:end; gap:6px; }.bar { width:100%; max-width:38px; min-height:3px; background:#9bcf8a; border-radius:6px 6px 0 0; }.bar.over { background:var(--coral); }.bar-day small { font-size:9px; color:var(--muted); }.chart-card svg { width:100%; height:auto; margin-top:12px; }.chart-line { fill:none; stroke:#4a8c6c; stroke-width:3; }.chart-dot { fill:#fffefa; stroke:#4a8c6c; stroke-width:2; }.chart-empty { fill:var(--muted); font-size:12px; }.adjustment-card { background:#e2f0d8; box-shadow:none; }.adjustment-card h3 { margin:6px 0; font-size:20px; }.adjustment-card>p:last-child { color:#335444; font-size:13px; line-height:1.65; }
.form-card { padding:19px; display:grid; gap:15px; }.form-card label,.form-grid label { display:grid; gap:7px; font-size:12px; font-weight:800; }.form-card input,.form-card textarea,.form-grid input,.form-grid select { width:100%; border:1px solid #d9dcd4; background:#fff; border-radius:10px; padding:11px; color:var(--ink); outline-color:#639d79; }.primary-button { border:0; border-radius:12px; padding:13px 16px; background:var(--ink); color:white; font-weight:800; margin-top:2px; }.form-note { margin:13px 4px; color:var(--muted); font-size:12px; line-height:1.6; }
.bottom-nav { position:fixed; z-index:2; bottom:0; left:0; right:0; display:flex; justify-content:center; gap:min(16vw,120px); padding:10px max(24px,calc((100vw - 720px)/2)); background:rgba(255,254,250,.94); backdrop-filter:blur(15px); border-top:1px solid var(--line); }.nav-item { display:grid; gap:3px; border:0; background:transparent; color:#8b948e; font-size:11px; font-weight:700; }.nav-item span { font-size:19px; line-height:17px; }.nav-item.active { color:#347256; }
.modal { width:min(92vw,500px); padding:0; border:0; border-radius:20px; background:var(--card); color:var(--ink); box-shadow:0 20px 70px rgba(0,0,0,.22); }.modal::backdrop { background:rgba(18,32,27,.45); }.modal form { padding:22px; }.modal-header { margin-bottom:20px; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }.form-grid label:nth-child(3),.auto-hint { grid-column:span 2; }.auto-hint { margin:0; padding:10px 12px; border-radius:10px; color:#34634e; background:#e7f2df; font-size:12px; font-weight:700; line-height:1.45; }.food-note { color:var(--muted); font-size:11px; line-height:1.55; margin:14px 0 0; }.modal .primary-button { width:100%; margin-top:20px; }.close-button { font-size:27px; }
@media (max-width:390px) { .app-shell{padding-inline:14px}.hero-heading strong{font-size:39px}.hero-meta{font-size:10px}.calorie-card{padding:15px;gap:12px}.calorie-ring{width:114px}.calorie-ring:before{width:93px}.form-grid{grid-template-columns:1fr}.form-grid label:nth-child(3),.auto-hint{grid-column:auto} }
.entry-balance { display:grid; grid-template-columns:1.2fr repeat(3,1fr); gap:7px; padding:13px; margin-top:14px; border-radius:13px; background:var(--ink); color:#fff; }.entry-balance>p { grid-column:span 4; color:#b9cdc0; font-size:10px; font-weight:800; letter-spacing:.7px; margin:0 0 2px; }.entry-balance div { min-width:0; }.entry-balance span { display:block; color:#bbcabf; font-size:10px; font-weight:700; }.entry-balance b { display:block; margin-top:3px; font-size:14px; letter-spacing:-.4px; white-space:nowrap; }.entry-balance .balance-kcal b { color:var(--lime); font-size:16px; }
.meal-type-select { width:100%; border:0; background:#e4f0df; color:#38705a; border-radius:8px; padding:6px 3px; font-size:10px; font-weight:800; }
#foodForm .form-grid label:nth-child(3) { grid-column:auto; }.food-name-field,.auto-hint { grid-column:span 2; }.calculate-button { align-self:end; min-height:42px; border:1px solid #4f856a; border-radius:10px; background:#e3f0df; color:#275842; font-size:13px; font-weight:800; }
.modal-actions { display:flex; align-items:center; gap:8px; }.recipe-link,.save-food-button,.add-ingredient-button { border:0; color:#2d6c50; background:#e5f0df; border-radius:9px; padding:8px 10px; font-size:11px; font-weight:800; }.save-food-button { width:100%; margin-top:11px; }.recipe-form { padding:22px; }.recipe-settings label:first-child { grid-column:span 2; }.recipe-caption { margin:18px 0 9px; color:var(--muted); font-size:12px; line-height:1.45; }.recipe-ingredients { display:grid; gap:8px; }.recipe-ingredient { display:grid; grid-template-columns:1fr 74px 50px 23px; gap:6px; align-items:end; }.recipe-ingredient label { display:grid; gap:5px; color:var(--muted); font-size:10px; font-weight:800; }.recipe-ingredient input { width:100%; border:1px solid #d9dcd4; background:#fff; border-radius:9px; padding:9px; color:var(--ink); outline-color:#639d79; }.recipe-ingredient-result { padding-bottom:10px; color:#3d725a; font-size:10px; font-weight:800; white-space:nowrap; }.remove-ingredient { border:0; background:transparent; color:#9fa7a1; font-size:20px; padding:5px 0; }.add-ingredient-button { margin-top:10px; width:100%; }.recipe-summary { margin-top:15px; }.recipe-summary .recipe-total { grid-column:span 2; }.recipe-summary .recipe-serving { grid-column:span 2; }.recipe-summary .recipe-total b,.recipe-summary .recipe-serving b { color:var(--lime); }
@supports (padding: max(0px)) { body { padding-bottom:max(88px, calc(70px + env(safe-area-inset-bottom))); } .bottom-nav { padding-bottom:max(10px, env(safe-area-inset-bottom)); } }
@media (max-width:600px) { input,select,textarea { font-size:16px !important; } .modal { max-height:calc(100dvh - 20px); overflow-y:auto; } .recipe-ingredient { grid-template-columns:1fr 68px 46px 22px; } }