/* --------------------------------------------------------------- Food Tracker — visual language (v2: light cream theme) Matches the provided design: warm cream background, a green hero "Daily Result" card with a circular progress ring, white cards with colored macro bars, and a bottom tab bar with a raised camera FAB for the screenshot-upload feature. --------------------------------------------------------------- */ :root { --bg: #F1EEE4; --card: #FFFFFF; --border: #E8E3D5; --text: #22241F; --text-dim: #6E7268; --text-faint: #9CA096; --green: #8FBF5C; --green-deep: #2E4620; --on-green: #2E4620; /* text/accents sitting ON the green hero card */ --ring-bg: #FFFFFF; /* the circle behind the ring's kcal text */ --carb: #E2A83D; --protein: #D65D4A; --fat: #4F8FE0; --accent: #E8A33D; --accent-deep: #C9752B; --danger: #D65D4A; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 26px; --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; } /* Dark theme — same layout and structure, inverted palette. Applied via [data-theme="dark"] on , toggled by the sun/moon button in the header and persisted in localStorage. */ [data-theme="dark"] { --bg: #14130F; --card: #201F19; --border: #34322A; --text: #F3F0E8; --text-dim: #A9A599; --text-faint: #77746A; --green: #8FBF5C; --green-deep: #3A5A28; --on-green: #F3F0E8; /* white text on the green card, not dark green */ --ring-bg: #100F0B; /* near-black circle instead of white */ --carb: #E2A83D; --protein: #E07260; --fat: #5C9AEF; --accent: #E8A33D; --accent-deep: #F0B860; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; max-width: 100vw; } body { min-height: 100vh; padding-bottom: calc(112px + env(safe-area-inset-bottom)); } h1, h2, h3 { margin: 0; font-weight: 800; } button { font-family: var(--font); cursor: pointer; border: none; background: none; } input, select, textarea { font-family: var(--font); background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 15px; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--green); outline-offset: 1px; } .icon { width: 18px; height: 18px; display: block; } .icon-sm { width: 15px; height: 15px; } /* ---------------- Login ---------------- */ .login-body { display: flex; align-items: center; justify-content: center; padding: 24px; min-height: 100vh; } .login-card { width: 100%; max-width: 340px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 26px; text-align: center; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 8px 30px rgba(34,36,31,0.06); } .login-mark { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; margin: 0 auto 6px; } .login-mark img { width: 100%; height: 100%; object-fit: cover; display: block; } .login-card h1 { font-size: 21px; margin-bottom: 6px; } .login-error { color: var(--protein); font-size: 14px; margin: 0; font-weight: 600; } .login-card button { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #241705; font-weight: 800; padding: 13px; border-radius: var(--radius-sm); font-size: 15px; } /* ---------------- App shell ---------------- */ .app-header { padding: 20px 18px 6px; display: flex; align-items: center; justify-content: space-between; max-width: 640px; margin: 0 auto; } .app-header .brand { display: flex; align-items: center; gap: 10px; } .logo-circle { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .logo-circle img { width: 100%; height: 100%; object-fit: cover; display: block; } .brand-name { font-weight: 800; font-size: 16px; } .header-icons { display: flex; gap: 8px; } .icon-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text); text-decoration: none; flex-shrink: 0; } .icon-btn:hover { border-color: var(--green); } main { padding: 0 18px; max-width: 640px; margin: 0 auto; } .page-title { font-size: 25px; font-weight: 800; margin: 10px 0 16px; letter-spacing: -.01em; } /* Date pill nav — single pill with arrows flush at the ends */ .date-nav { display: flex; align-items: center; justify-content: space-between; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 4px 6px; margin-bottom: 16px; } .date-nav button { width: 32px; height: 32px; border-radius: 50%; color: var(--text-dim); font-size: 17px; flex-shrink: 0; } .date-nav button:hover { background: var(--bg); } .date-nav .date-label { font-weight: 700; font-size: 14.5px; } /* ---------------- Daily Result (hero ring card) ---------------- */ .result-card { background: linear-gradient(160deg, var(--green), #7FB04E); border-radius: var(--radius-lg); padding: 22px; margin-bottom: 16px; color: var(--on-green); } .result-top { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; margin-bottom: 16px; } .edit-goal-btn { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.35); display: flex; align-items: center; justify-content: center; color: var(--on-green); flex-shrink: 0; } .edit-goal-btn:hover { background: rgba(255,255,255,0.55); } .result-top .dot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--on-green); flex-shrink: 0; } .result-body { display: flex; align-items: center; justify-content: space-between; } .result-pct { font-size: 42px; font-weight: 800; line-height: 1; } .result-left { font-size: 13px; margin-top: 8px; opacity: .8; font-weight: 600; } .ring-wrap { position: relative; width: 108px; height: 108px; flex-shrink: 0; } .ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .ring-track { fill: none; stroke: rgba(255,255,255,0.4); stroke-width: 10; } .ring-progress { fill: none; stroke: var(--green-deep); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .5s ease; } .ring-inner-bg { position: absolute; inset: 12px; background: var(--ring-bg); border-radius: 50%; } .ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .ring-kcal { font-size: 19px; font-weight: 800; color: var(--on-green); line-height: 1.1; } .ring-goal { font-size: 10.5px; color: var(--text-dim); font-weight: 600; margin-top: 1px; } .tdee-suggestion { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.25); font-size: 12.5px; color: var(--on-green); } .tdee-suggestion strong { font-size: 14px; } .tdee-suggestion button { background: rgba(255,255,255,0.35); color: var(--on-green); font-weight: 800; font-size: 12px; padding: 6px 12px; border-radius: 999px; flex-shrink: 0; } .tdee-suggestion button:hover { background: rgba(255,255,255,0.55); } /* ---------------- Generic white cards ---------------- */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px; } .card-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .card-header-row .title { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 7px; } .card-header-row .expand { color: var(--text-faint); } /* ---------------- Nutrition macro lines ---------------- */ .goal-mode-row { display: flex; gap: 8px; margin-bottom: 14px; } .goal-mode-btn { flex: 1; background: var(--bg); border: 1px solid var(--border); color: var(--text-dim); padding: 8px; border-radius: 999px; font-size: 12.5px; font-weight: 700; } .goal-mode-btn.active { background: var(--accent); color: #241705; border-color: var(--accent); } .goal-mode-hint { font-size: 12px; color: var(--text-faint); margin-bottom: 14px; font-style: italic; } .ml-target { font-size: 12px; font-weight: 600; color: var(--text-faint); margin-left: 4px; } .macro-line { margin-bottom: 18px; } .macro-line:last-child { margin-bottom: 0; } .macro-line .ml-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 14.5px; margin-bottom: 4px; } .macro-line .ml-top .label { color: var(--text-dim); font-weight: 600; } .macro-line .ml-top .value { font-weight: 800; color: var(--text); } .macro-line .ml-pct { font-size: 12.5px; font-weight: 800; margin-bottom: 7px; } .macro-line.carb .ml-pct { color: var(--carb); } .macro-line.protein .ml-pct { color: var(--protein); } .macro-line.fat .ml-pct { color: var(--fat); } .ml-bar-track { height: 6px; border-radius: 999px; background: var(--bg); overflow: hidden; } .ml-bar-fill { height: 100%; border-radius: 999px; transition: width .4s ease; } .macro-line.carb .ml-bar-fill { background: var(--carb); } .macro-line.protein .ml-bar-fill { background: var(--protein); } .macro-line.fat .ml-bar-fill { background: var(--fat); } .water-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .water-count { font-size: 24px; font-weight: 800; } .water-of { font-size: 13px; color: var(--text-faint); font-weight: 600; margin-left: 4px; } .water-buttons { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .water-btn { border-radius: 999px; font-weight: 800; flex-shrink: 0; } .water-btn.plus { background: var(--accent); color: #241705; padding: 10px 16px; font-size: 13px; } .water-btn.plus:hover { background: var(--accent-deep); } .water-btn.minus { width: 34px; height: 34px; background: var(--bg); border: 1px solid var(--border); color: var(--text-dim); font-size: 18px; display: flex; align-items: center; justify-content: center; } .water-btn.minus:hover { color: var(--protein); border-color: var(--protein); } /* ---------------- Quick add ---------------- */ .quickadd-row { display: flex; gap: 8px; } .quickadd-row textarea { flex: 1; resize: vertical; min-height: 46px; } .quickadd-row button { background: var(--accent); color: #241705; font-weight: 800; padding: 0 18px; border-radius: var(--radius-sm); white-space: nowrap; } .quickadd-hint { font-size: 12px; color: var(--text-faint); margin-top: 8px; } .preview-list { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; } .preview-item-group { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; } .preview-item-group.unmatched { border-color: var(--protein); } .pig-header { display: flex; align-items: center; gap: 10px; } .pig-query { flex: 1; min-width: 0; font-size: 13px; color: var(--text-dim); font-style: italic; } .pig-header input.pi-grams { width: 62px; text-align: center; background: var(--card); } .pig-header .pi-remove { color: var(--text-faint); font-size: 16px; padding: 2px 6px; } .pig-empty { font-size: 13px; color: var(--protein); padding-top: 6px; } .pig-candidates { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; } .pi-candidate { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; cursor: pointer; } .pi-candidate:hover { border-color: var(--text-faint); } .pi-candidate.selected { border-color: var(--green); background: rgba(143, 191, 92, 0.1); } .pi-candidate .pic-name { font-size: 13px; font-weight: 600; } .pi-candidate .pic-name .src { font-size: 10px; text-transform: uppercase; color: var(--text-faint); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; margin-left: 4px; font-weight: 700; } .pi-candidate .pic-kcal { font-size: 13px; color: var(--accent-deep); font-weight: 700; white-space: nowrap; } .meal-select-row { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .meal-select-row select { flex: 1; min-width: 100px; } .save-all { background: var(--accent); color: #241705; font-weight: 800; padding: 10px 18px; border-radius: var(--radius-sm); flex-shrink: 0; } .save-all:hover { background: var(--accent-deep); } /* ---------------- Search & add ---------------- */ .search-bar-wrap { position: relative; } .search-bar-wrap input#searchInput { width: 100%; padding-right: 46px; } .search-icon-btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #241705; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .search-icon-btn:hover { background: var(--accent-deep); } .search-results { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; } .search-loading { padding: 10px; font-size: 13px; color: var(--text-faint); text-align: center; font-style: italic; } .search-result { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; } .search-result:hover { background: var(--bg); border-color: var(--border); } .search-result .n { font-size: 14px; font-weight: 600; } .search-result .src { font-size: 10px; text-transform: uppercase; color: var(--text-faint); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; margin-left: 6px; font-weight: 700; } .search-result .kcal100 { font-size: 12px; color: var(--text-dim); font-weight: 600; } .add-form { margin-top: 12px; padding: 14px; background: var(--bg); border-radius: var(--radius-sm); display: none; } .add-form.open { display: block; } .add-form .selected-name { font-weight: 800; margin-bottom: 8px; } .unit-toggle { display: flex; gap: 8px; margin-bottom: 10px; } .unit-toggle .unit-btn { background: var(--card); border: 1px solid var(--border); color: var(--text-dim); padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; } .unit-toggle .unit-btn.active { background: var(--green); color: var(--on-green); border-color: var(--green); } .add-form .row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .add-form .row input, .add-form .row select { flex: 1; min-width: 70px; background: var(--card); } .add-form .row button { background: var(--accent); color: #241705; font-weight: 800; padding: 0 16px; border-radius: var(--radius-sm); flex-shrink: 0; } .add-form .preview-kcal { font-size: 13px; color: var(--text-dim); font-weight: 600; } /* ---------------- Screenshot upload ---------------- */ .file-picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .file-picker-btn { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 9px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; cursor: pointer; } .file-picker-btn:hover { border-color: var(--green); } .file-name { font-size: 12px; color: var(--text-faint); } .img-preview { display: block; max-width: 100%; max-height: 220px; border-radius: var(--radius-sm); border: 1px solid var(--border); margin-top: 12px; object-fit: contain; } .photo-hint-input { width: 100%; margin-top: 12px; } .extract-btn { display: block; width: 100%; margin-top: 12px; background: var(--accent); color: #241705; font-weight: 800; padding: 11px; border-radius: var(--radius-sm); } .extract-btn:disabled { background: var(--border); color: var(--text-faint); cursor: not-allowed; } .extracted-form { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); } .extracted-form.open { display: block; } .extracted-form .row { margin-bottom: 10px; } .extracted-form .row input { width: 100%; background: var(--bg); } .ex-serving-label { display: block; font-size: 10px; color: var(--text-faint); text-transform: uppercase; margin-bottom: 4px; font-weight: 700; } .ex-serving-input { width: 100%; background: var(--bg); font-weight: 700; } #exPer100Hint { color: var(--accent-deep); font-weight: 700; font-style: normal; margin-bottom: 10px; } .extracted-form .row-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; } .extracted-form .row-4 label { display: block; font-size: 10px; color: var(--text-faint); text-transform: uppercase; margin-bottom: 4px; font-weight: 700; } .extracted-form .row-4 input { width: 100%; text-align: center; background: var(--bg); } .extracted-hint { font-size: 12px; color: var(--text-faint); margin-bottom: 12px; } /* ---------------- Meal groups ---------------- */ .meal-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 12px; overflow: hidden; } .meal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; } .meal-header .name { font-weight: 800; font-size: 15.5px; } .meal-header-right { display: flex; align-items: center; gap: 10px; } .meal-header .kcal { color: var(--accent-deep); font-size: 14px; font-weight: 800; } .mh-add-cal { width: 24px; height: 24px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); color: var(--text-faint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mh-add-cal:hover { color: var(--accent-deep); border-color: var(--accent); } .meal-items { border-top: 1px solid var(--border); } .meal-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--border); font-size: 14px; gap: 10px; } .meal-item:last-child { border-bottom: none; } .meal-item .mi-info { flex: 1; min-width: 0; cursor: pointer; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; transition: background .15s ease; } .meal-item .mi-info:hover { background: var(--bg); } .meal-item .mi-name { font-weight: 700; } .meal-item .mi-grams { color: var(--text-faint); font-size: 12px; font-weight: 500; margin-left: 6px; } .meal-item .mi-source-tag { font-size: 11px; margin-left: 6px; opacity: 0.7; } .meal-item .mi-macros { color: var(--text-dim); font-size: 12px; margin-top: 3px; font-weight: 600; } .meal-item .mi-macros .mc { font-weight: 800; } .meal-item .mi-macros .mc.c { color: var(--carb); } .meal-item .mi-macros .mc.p { color: var(--protein); } .meal-item .mi-macros .mc.f { color: var(--fat); } .meal-item .mi-del { color: var(--text-faint); font-size: 15px; padding: 2px 6px; flex-shrink: 0; } .meal-item .mi-del:hover { color: var(--protein); } .meal-empty { padding: 16px 20px; color: var(--text-faint); font-size: 13px; font-style: italic; } /* ---------------- Misc ---------------- */ .toast { position: fixed; bottom: 108px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); border: none; padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 60; box-shadow: 0 6px 20px rgba(0,0,0,.15); } .toast.show { opacity: 1; } /* ---------------- Bottom nav ---------------- */ .bottom-nav { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: 608px; margin: 0 auto; background: var(--card); border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 10px 30px rgba(34,36,31,0.14); display: flex; align-items: center; justify-content: space-around; padding: 10px 8px; z-index: 40; } .bottom-nav a, .bottom-nav button.nav-btn { background: none; border: none; color: var(--text-faint); display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; padding: 4px 10px; } .bottom-nav a.active, .bottom-nav button.nav-btn.active { color: var(--text); } .bottom-nav .fab { width: 54px; height: 54px; border-radius: 50%; background: #20211D; color: #fff; display: flex; align-items: center; justify-content: center; margin-top: -30px; box-shadow: 0 6px 16px rgba(0,0,0,.25); flex-shrink: 0; } /* ---------------- History page (reskinned) ---------------- */ .tabs-row { display: flex; gap: 8px; padding: 0 0 14px; } .tabs-row .tab { background: var(--card); border: 1px solid var(--border); color: var(--text-dim); padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; } .tabs-row .tab.active { background: var(--text); color: var(--bg); border-color: var(--text); } .toggle-row { display: flex; gap: 8px; padding: 0 0 16px; } .toggle-row .toggle { background: var(--card); border: 1px solid var(--border); color: var(--text-dim); padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; } .toggle-row .toggle.active { background: var(--accent); color: #241705; border-color: var(--accent); } .avg-pill { display: inline-block; border: 1px solid var(--border); border-radius: 999px; padding: 4px 14px; font-size: 12px; color: var(--text-dim); margin-bottom: 12px; font-weight: 700; } .summary-kcal { font-family: var(--font); font-size: 40px; font-weight: 800; line-height: 1; } .summary-kcal span { font-size: 15px; color: var(--text-dim); font-weight: 600; } .meal-avg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-top: 18px; } .meal-avg-grid .mag-item { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-dim); font-weight: 600; } .meal-avg-grid .mag-item strong { color: var(--text); font-weight: 800; } .avg-water-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-dim); font-weight: 600; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } .avg-water-row strong { color: var(--fat); font-weight: 800; } .macro-row { display: flex; gap: 10px; } .macro-box { flex: 1; background: var(--bg); border-radius: var(--radius-sm); padding: 10px 8px; text-align: center; } .macro-box .label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 800; } .macro-box .value { font-size: 18px; font-weight: 800; margin-top: 2px; } .macro-box .pct { font-size: 12px; color: var(--text-faint); font-weight: 600; } .macro-box.carb .label { color: var(--carb); } .macro-box.protein .label { color: var(--protein); } .macro-box.fat .label { color: var(--fat); } .chart-wrap { position: relative; height: 170px; margin-top: 26px; padding-right: 4px; } .chart-gridlines { position: absolute; inset: 0; } .chart-gridlines .gline { position: absolute; left: 0; right: 0; border-top: 1px dotted var(--border); height: 0; } .chart-gridlines .gline.top { top: 0; } .chart-gridlines .gline.bottom { top: auto; bottom: 0; border-top: 1px solid var(--border); } .chart-gridlines .gline span { position: absolute; right: 0; top: -8px; font-size: 10px; color: var(--text-faint); background: var(--card); padding-left: 4px; font-weight: 600; } .chart-gridlines .gline.goal-line { border-top: 1px dashed var(--accent-deep); } .chart-gridlines .gline.goal-line span { color: var(--accent-deep); } .chart-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; padding: 0 2px; } .chart-bar-col { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; } .chart-bar { width: 55%; min-width: 8px; background: linear-gradient(180deg, var(--accent), var(--accent-deep)); border-radius: 5px 5px 2px 2px; transition: height .3s ease; } .chart-bar.empty { background: var(--border); } .chart-bar.today { background: linear-gradient(180deg, var(--green), var(--green-deep)); } .chart-days { display: flex; justify-content: space-between; gap: 6px; padding: 8px 2px 0; } .chart-days .cd { flex: 1; text-align: center; font-size: 11px; color: var(--text-faint); font-weight: 600; } .chart-days .cd.today { color: var(--green); font-weight: 800; } /* ---------------- Add Meal trigger + modal ---------------- */ .add-meal-trigger { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--accent); color: #241705; font-weight: 800; padding: 15px; border-radius: var(--radius-lg); font-size: 15px; margin-bottom: 16px; box-shadow: 0 4px 14px rgba(232, 163, 61, 0.28); } .add-meal-trigger:hover { background: var(--accent-deep); } .modal-overlay { position: fixed; inset: 0; background: rgba(20, 20, 15, 0.45); z-index: 70; display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .25s ease; } .modal-overlay.open { opacity: 1; pointer-events: auto; } .modal-sheet { background: var(--card); width: 100%; max-width: 640px; border-radius: 26px 26px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); max-height: 85vh; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; transform: translateY(100%); transition: transform .3s ease; } .modal-overlay.open .modal-sheet { transform: translateY(0); } .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .modal-title { font-weight: 800; font-size: 18px; } .modal-close { width: 32px; height: 32px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--text-dim); } .modal-close:hover { color: var(--text); } .modal-tabs { padding: 0 0 16px; } @media (max-width: 420px) { .summary-kcal { font-size: 34px; } .result-pct { font-size: 36px; } .macro-box .value { font-size: 15px; } }