:root { --ink:#15352b; --muted:#65756f; --paper:#f2f5f2; --card:#fff; --line:#dce4dd; --primary:#0b4f3a; --primary-soft:#e8f2ed; --protein:#d96943; --fat:#d49a23; --carb:#3d8b9d; --safe-bottom:env(safe-area-inset-bottom, 0px); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.language-switcher { position:fixed; z-index:80; top:10px; right:12px; display:flex; flex-direction:row; align-items:center; gap:7px; padding:6px 8px; color:var(--muted); background:rgba(255,255,255,.94); border:1px solid var(--line); border-radius:12px; box-shadow:0 5px 18px rgba(20,53,43,.06); backdrop-filter:blur(14px); }
.language-switcher span { font-size:.72rem; }
.language-switcher select { width:auto; min-height:34px; padding:4px 26px 4px 8px; border:0; background:transparent; font-size:.8rem; font-weight:800; }
.shell { width:min(100%, 1160px); margin:0 auto; padding:74px clamp(16px,3vw,36px) 64px; }
.hidden { display:none !important; }
.onboarding { min-height:80vh; display:flex; flex-direction:column; justify-content:center; }
.install-guide { width:min(100%,560px); margin:0 auto; }
.install-intro { margin:16px 0 26px; color:var(--muted); font-size:1.08rem; line-height:1.6; }
.install-steps { display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.install-steps li { display:grid; grid-template-columns:42px 46px minmax(0,1fr); gap:10px; align-items:center; min-height:76px; padding:12px 16px; background:white; border:1px solid var(--line); border-radius:20px; box-shadow:0 5px 18px rgba(20,53,43,.04); }
.step-number, .step-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; }
.step-number { color:#123b30; background:#edf5ff; font-weight:850; }
.step-icon { color:#101b18; background:#f3f4f8; font-size:1.2rem; font-weight:850; }
.install-steps strong { font-size:1rem; line-height:1.4; }
.install-after { margin:20px 0 14px; color:var(--muted); line-height:1.5; }
.platform-badge { display:inline-flex; width:max-content; margin:0 0 4px; padding:7px 11px; color:var(--primary); background:var(--primary-soft); border:1px solid #cfe0d7; border-radius:999px; font-size:.76rem; font-weight:850; letter-spacing:.02em; }
.install-continue { width:min(100%,560px); margin:0 auto; }
.auth-gate { min-height:80vh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; width:min(100%,520px); margin:0 auto; }
.auth-form { display:grid; gap:14px; width:100%; }
.setup-note { margin:0; padding:12px; color:var(--primary); background:#e1eee8; border-radius:10px; font-weight:700; }
.account-actions { display:flex; align-items:center; gap:8px; }
.user-list { display:grid; gap:10px; margin-top:14px; }
.user-row { display:grid; grid-template-columns:minmax(0,1fr) 130px 90px; gap:9px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:11px; }
.user-row p { margin:0; }
.user-row small { color:var(--muted); }
.user-status { border:0; border-radius:9px; padding:10px; font:inherit; font-size:.8rem; font-weight:800; cursor:pointer; }
.user-status.active { color:#9c3c24; background:#f6e8e3; }
.user-status.inactive { color:var(--primary); background:#e1eee8; }
.user-status.protected-admin { color:#68756f; background:#edf1ef; cursor:not-allowed; }
.user-row-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.reset-password-dialog { width:min(calc(100% - 28px),480px); padding:0; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:0 28px 80px rgba(7,48,36,.28); }
.reset-password-dialog::backdrop { background:rgba(7,30,24,.48); backdrop-filter:blur(5px); }
.reset-password-form { display:grid; gap:16px; padding:24px; }
.reset-password-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.reset-password-head h2 { margin:0; }
.reset-password-account { margin:0; padding:11px 13px; background:var(--primary-soft); border-radius:12px; font-weight:750; }
.dialog-close { width:42px; height:42px; flex:none; border:0; border-radius:12px; color:var(--muted); background:#eef3f0; font-size:1.45rem; cursor:pointer; }
.dialog-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dialog-actions .button { padding-inline:12px; }
.reset-password-form .message:empty { min-height:0; margin:0; }
@media (max-width:599px) { .user-row-actions { width:100%; } .reset-password-dialog { border-radius:22px; } .reset-password-form { padding:20px; } }
.eyebrow { margin:0 0 8px; color:var(--primary); font-size:.75rem; font-weight:800; letter-spacing:.12em; }
h1 { margin:0; font-size:clamp(2rem, 8vw, 3rem); line-height:1.08; letter-spacing:-.04em; }
h2 { margin:0 0 8px; font-size:1.25rem; }
.lead { max-width:540px; margin:20px 0; color:var(--muted); font-size:1.1rem; line-height:1.65; }
.steps { margin:0 0 24px; padding-left:24px; line-height:1.85; }
.fineprint, .disclaimer { color:var(--muted); font-size:.82rem; line-height:1.6; }
.auto-note { margin:0; color:var(--primary); font-size:.9rem; font-weight:700; }
.target-mode-label { margin-top:18px; }
.message { min-height:24px; margin:12px 0 0; color:#9c3c24; font-weight:600; }
.button { border:0; border-radius:12px; padding:15px 20px; width:100%; font:inherit; font-weight:800; cursor:pointer; transition:transform .16s ease, opacity .16s ease, box-shadow .16s ease; touch-action:manipulation; }
.button:active, .small-button:active, .add-ingredient:active, .auto-portion:active { transform:scale(.985); }
.primary { color:white; background:var(--primary); }
.secondary { color:var(--primary); background:#e1eee8; }
.topbar { display:flex; align-items:flex-start; justify-content:space-between; margin:8px 0 24px; }
.topbar h1 { font-size:2rem; }
.plan-badge { padding:7px 10px; color:var(--primary); background:#dcece4; border-radius:999px; font-size:.8rem; font-weight:700; }
.role-selector { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }
.role-option { min-height:46px; border:1px solid var(--line); border-radius:11px; color:var(--ink); background:white; font:inherit; font-weight:800; cursor:pointer; }
.role-option.active { color:white; background:var(--primary); border-color:var(--primary); }
.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.small-button { border:0; border-radius:10px; padding:10px 12px; color:var(--primary); background:#e1eee8; font:inherit; font-weight:800; cursor:pointer; }
.compact-grid { margin-bottom:12px; }
.phone-search { display:grid; grid-template-columns:minmax(0,1fr) 110px; gap:9px; align-items:end; }
.phone-search .button { min-height:46px; padding:10px 14px; }
.client-search-results { display:grid; gap:7px; margin-top:10px; }
.client-search-result { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px; color:var(--primary); background:#f7faf8; font:inherit; text-align:left; cursor:pointer; }
.client-search-result strong, .client-search-result span { pointer-events:none; }
.client-search-result span { color:var(--muted); font-size:.82rem; }
.active-client { margin:10px 0 0; color:var(--muted); font-size:.84rem; font-weight:700; }
.client-actions { display:grid; grid-template-columns:1fr; }
.save-message { min-height:20px; margin:9px 0 0; color:var(--primary); font-size:.86rem; font-weight:700; }
.history-head { display:flex; align-items:center; justify-content:space-between; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.history-head h3 { margin:0; font-size:1rem; }
.history-head span { color:var(--muted); font-size:.8rem; }
.history-list { display:grid; gap:9px; margin-top:12px; }
.history-item { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:11px; background:#f8faf8; }
.history-item p { margin:0; }
.personal-remark-label { margin-top:14px; }
.personal-history-remark { margin-top:5px !important; color:var(--primary); font-size:.86rem; font-weight:750; }
.history-summary { margin-top:4px !important; color:var(--muted); font-size:.78rem; line-height:1.45; }
.load-record { border:0; border-radius:9px; padding:9px 11px; color:var(--primary); background:#e1eee8; font:inherit; font-size:.8rem; font-weight:800; cursor:pointer; }
.history-actions { display:flex; gap:6px; }
.delete-record { border:0; border-radius:9px; padding:9px 11px; color:#9c3c24; background:#f6e8e3; font:inherit; font-size:.8rem; font-weight:800; cursor:pointer; }
.delete-record.confirm-delete { color:#fff; background:#9c3c24; box-shadow:0 0 0 3px rgba(156,60,36,.14); }
.delete-record:disabled { cursor:wait; opacity:.62; }
.card { margin:16px 0; padding:20px; background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 5px 20px rgba(15,46,35,.04); }
.muted { color:var(--muted); line-height:1.55; }
.field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:20px 0; }
.carb-cycle-panel { margin:18px 0; padding:16px; border:1px solid var(--line); border-radius:14px; background:#f7faf8; }
.carb-cycle-panel h3 { margin:0; }
.carb-cycle-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; margin-top:14px; }
.carb-cycle-days label { font-size:.78rem; }
.carb-cycle-days select { min-height:42px; padding:8px; }
.carb-cycle-days label > span { display:block; margin-bottom:5px; }
.carb-cycle-days .cycle-training-select { margin-top:6px; font-size:.74rem; }
.carb-cycle-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:14px; }
.cycle-summary-card { padding:11px; border-radius:11px; background:#e8f2ed; }
.cycle-summary-card strong, .cycle-summary-card span { display:block; }
.cycle-summary-card span { margin-top:5px; color:var(--muted); font-size:.75rem; line-height:1.5; }
.cycle-summary-card strong span, .cycle-summary-card strong b { display:inline; margin:0; color:inherit; font-size:inherit; }
.cycle-summary-macros i { font-style:normal; }
label { display:flex; flex-direction:column; gap:7px; font-weight:700; font-size:.9rem; }
input, select, textarea { min-height:48px; width:100%; padding:10px 12px; color:var(--ink); background:white; border:1px solid var(--line); border-radius:10px; font:inherit; transition:border-color .16s ease, box-shadow .16s ease; }
textarea { resize:vertical; }
input:focus, select:focus, textarea:focus { outline:none; border-color:#4f8a75; box-shadow:0 0 0 3px rgba(11,79,58,.11); }
.denied-help { margin:14px 0 0; padding:14px; color:#7d321f; background:#f6e8e3; border-radius:11px; line-height:1.55; }
.denied-help p { margin:6px 0 0; }
.notification-send { margin-top:14px; }
.food-price-list { display:grid; gap:18px; margin:18px 0; }
.food-category-group { display:grid; gap:10px; }
.food-category-group h3 { margin:0; padding:0 2px 8px; color:var(--primary); border-bottom:2px solid #dcece4; font-size:1rem; }
.food-category-items { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.add-food-panel { margin:18px 0; padding:14px; background:#f5f8f6; border:1px solid var(--line); border-radius:14px; }
.add-food-panel summary { color:var(--primary); font-weight:850; cursor:pointer; }
.add-food-panel form { margin-top:12px; }
.food-form-actions { display:flex; align-items:center; gap:9px; }
.food-form-actions .button { flex:1; }
.translation-action { display:flex; flex-direction:column; justify-content:flex-end; gap:6px; }
.translation-action small { color:var(--muted); font-size:.75rem; line-height:1.35; }
.custom-food-actions { display:flex; gap:6px; }
.custom-food-actions button { border:0; border-radius:8px; padding:8px 10px; font:inherit; font-size:.78rem; font-weight:800; cursor:pointer; }
.edit-food { color:var(--primary); background:#e1eee8; }
.delete-food { color:#9c3c24; background:#f6e8e3; }
.delete-food.confirming { color:white; background:#9c3c24; }
.food-price-row { display:grid; grid-template-columns:minmax(0,1fr) 125px auto; gap:9px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:13px; }
.food-price-row:not(:has(.custom-food-actions)) { grid-template-columns:minmax(0,1fr) 125px; }
.food-price-row > span:first-child { display:flex; flex-direction:column; gap:3px; }
.food-price-row small { color:var(--muted); font-weight:600; }
.price-input { display:grid; grid-template-columns:auto 1fr; gap:7px; align-items:center; }
.price-input b { color:var(--primary); }
.extra-fee-panel { margin:18px 0; padding:16px; background:#f5f8f6; border:1px solid var(--line); border-radius:14px; }
.extra-fee-panel h3 { margin:0; font-size:1rem; }
.extra-fee-panel .muted { margin:6px 0 0; font-size:.82rem; }
.extra-fee-panel .field-grid { margin-bottom:0; }
.cycle-admin-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; }
.cycle-admin-grid fieldset { display:grid; gap:10px; margin:0; padding:12px; border:1px solid var(--line); border-radius:12px; }
.cycle-admin-grid legend { padding:0 6px; color:var(--primary); font-weight:850; }
.daily-food-cost, .meal-food-cost { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--primary); background:#e8f2ed; border-radius:12px; font-weight:800; }
.daily-food-cost { margin:12px 0; padding:13px 14px; }
.meal-food-cost { margin-top:10px; padding:11px 12px; font-size:.86rem; }
.meal-cost-breakdown { display:block; }
.meal-cost-breakdown > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:5px 0; }
.meal-cost-breakdown .meal-cost-total { margin-top:3px; padding-top:8px; border-top:1px solid rgba(11,79,58,.18); }
.order-total-card { margin:12px 0; padding:6px 14px; color:var(--primary); background:#e8f2ed; border-radius:12px; font-weight:800; }
.order-total-card > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; }
.order-total-card .grand-total { border-top:1px solid rgba(11,79,58,.18); font-size:1.05rem; }
.calorie-card { text-align:center; background:var(--primary); color:white; }
.calorie-card .muted, .calorie-card #bmr-detail { color:#cde3d9; }
.calories { margin:7px 0; font-size:3.4rem; font-weight:850; letter-spacing:-.07em; }
.calories small { font-size:1rem; letter-spacing:0; }
.manual-calorie-check { display:grid; grid-template-columns:1fr auto; gap:5px 12px; margin:16px auto 0; padding:13px 15px; max-width:430px; text-align:left; color:#e8f5ef; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:14px; }
.manual-calorie-check strong { text-align:right; }
.manual-calorie-check small { grid-column:1/-1; color:#ffe8a7; font-size:.86rem; font-weight:800; }
.manual-calorie-check.is-hit small { color:#aef0c8; }
.manual-calorie-check.is-over small { color:#ffc3b2; }
.macro-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.macro { margin:0; padding:16px; }
.macro p, .macro span { margin:0; color:var(--muted); font-size:.82rem; }
.macro strong { display:block; margin:6px 0; font-size:1.45rem; }
.protein strong { color:var(--protein); }.fat strong { color:var(--fat); }.carb strong { color:var(--carb); }
.meal-planner { margin-top:24px; }
.meal-mode-toggle { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:18px 0 12px; padding:5px; border-radius:14px; background:#e9f1ec; }
.meal-mode-button { min-height:44px; border:0; border-radius:10px; color:var(--muted); background:transparent; font:inherit; font-weight:850; cursor:pointer; }
.meal-mode-button.active { color:white; background:var(--primary); box-shadow:0 6px 14px rgba(11,79,58,.18); }
.week-controls { margin:0 0 18px; padding:14px; border:1px solid var(--line); border-radius:16px; background:#f7faf8; }
.week-day-tabs { display:flex; gap:7px; overflow-x:auto; padding:2px 1px 8px; scrollbar-width:none; }
.week-day-tabs::-webkit-scrollbar { display:none; }
.week-day-tab { flex:0 0 auto; min-width:76px; min-height:46px; padding:7px 10px; border:1px solid var(--line); border-radius:12px; color:var(--primary); background:white; font:inherit; font-size:.82rem; font-weight:800; cursor:pointer; }
.week-day-tab span, .week-day-tab small { display:block; }
.week-day-tab small { margin-top:2px; font-size:.66rem; font-weight:750; opacity:.75; }
.week-day-tab.active { color:white; background:var(--primary); border-color:var(--primary); }
.week-day-tab.locked::after { content:' 🔒'; font-size:.72rem; }
.week-controls.week-sticky-active { display:contents; }
.week-controls.week-sticky-active .week-day-tabs { position:sticky; z-index:18; top:12px; padding:10px 12px; background:rgba(242,247,244,.96); border:1px solid var(--line); border-radius:14px; box-shadow:0 8px 22px rgba(20,53,43,.1); backdrop-filter:blur(14px); }
.week-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:8px; }
.week-actions .button, .week-actions select { min-height:46px; }
.week-actions #random-week { grid-column:1/-1; }
.week-actions .clear-week-foods { grid-column:1/-1; color:#9c3c24; border-color:#e8c8be; background:#f9eeea; }
.week-actions .cycle-generate-control { grid-column:1/-1; }
.week-actions .clear-week-foods.confirming { color:#fff; border-color:#9c3c24; background:#9c3c24; }
.week-random-settings { margin-top:10px; }
.week-random-settings summary { color:var(--primary); font-weight:850; cursor:pointer; }
.week-settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; }
.week-settings-grid .check-row { display:flex; align-items:center; flex-direction:row; gap:8px; }
.week-settings-grid .check-row input { width:20px; min-height:20px; }
.weekly-summary { margin-top:16px; }
.weekly-cost-total { display:flex; justify-content:space-between; gap:12px; margin-top:14px; padding:14px; color:white; background:var(--primary); border-radius:12px; font-weight:850; }
.meal-count-label { margin:18px 0; }
.meal-total-row { position:sticky; top:12px; z-index:8; display:flex; align-items:center; justify-content:space-between; margin:12px 0; padding:11px 14px; background:rgba(248,250,248,.96); border:1px solid rgba(205,219,210,.9); border-radius:12px; box-shadow:0 7px 18px rgba(20,53,43,.08); backdrop-filter:blur(12px); }
.meal-planner.week-mode-active .meal-total-row { top:82px; }
.meal-total-row.is-complete { display:none; }
#meal-total { color:var(--primary); font-weight:800; }
#meal-total.invalid { color:#9c3c24; }
.daily-total-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0; padding:15px 16px; color:white; background:var(--primary); border-radius:14px; font-weight:850; }
.daily-total-banner strong { flex:none; font-size:1.15rem; }
.meal-planner.hide-pricing .daily-total-banner,
.meal-planner.hide-pricing .order-total-card,
.meal-planner.hide-pricing .meal-food-cost { display:none; }
.meal-list { display:grid; gap:12px; margin-top:14px; }
.mobile-meal-tabs { display:none; }
.meal-row { padding:16px; background:#f8faf8; border:1px solid var(--line); border-radius:14px; }
.meal-row-head { display:grid; grid-template-columns:1fr 108px; align-items:end; gap:12px; }
.meal-name { margin:0; font-weight:800; }
.meal-percent-label { gap:5px; }
.meal-percent-label span { color:var(--muted); font-size:.75rem; }
.meal-percent-label .percent-input { position:relative; display:block; }
.meal-percent-label .percent-input input { padding-right:30px; }
.meal-percent-label .percent-input b { position:absolute; top:50%; right:12px; color:var(--primary); font-size:.9rem; transform:translateY(-50%); pointer-events:none; }
.meal-macros { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px; }
.meal-metric { display:flex; flex-direction:column; gap:3px; }
.meal-metric span { color:var(--muted); font-size:.72rem; }
.meal-metric strong { font-size:.95rem; }
.meal-section-title { margin:16px 0 8px; color:var(--muted); font-size:.76rem; font-weight:800; letter-spacing:.04em; }
.ingredient-list { display:grid; gap:8px; }
.daily-ingredient-summary { margin-top:18px; padding:18px; border:1px solid #cddbd2; border-radius:16px; background:#f7faf8; }
.daily-ingredient-summary-head { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:12px; }
.daily-ingredient-summary-head h3 { margin:2px 0 0; }
.daily-ingredient-summary-head > span { color:var(--muted); font-size:.78rem; }
.daily-ingredient-summary-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.daily-ingredient-summary-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-radius:11px; background:#e9f2ec; color:var(--primary); font-weight:750; }
.daily-ingredient-summary-item strong { white-space:nowrap; font-size:1rem; }
.daily-macro-balance { margin-top:14px; padding-top:14px; border-top:1px solid #cddbd2; }
.daily-macro-balance h4 { margin:0 0 9px; font-size:.88rem; }
.daily-macro-balance-list { display:flex; flex-wrap:wrap; gap:7px; }
.daily-balance-action { margin-top:11px; min-height:44px; padding:11px 14px; }
.share-meal-plan { margin-top:14px; }
@media (max-width:560px) { .daily-ingredient-summary-list { grid-template-columns:1fr; } .daily-ingredient-summary-head { align-items:flex-start; flex-direction:column; } }
.ingredient-row { display:grid; grid-template-columns:minmax(0,1fr) 42px 92px 38px; gap:8px; align-items:end; }
.ingredient-row label { gap:4px; color:var(--muted); font-size:.72rem; }
.ingredient-row select, .ingredient-row input { min-height:42px; }
.ingredient-lock { width:42px; height:42px; min-height:42px; padding:0; display:grid; place-items:center; border:1px solid var(--line); border-radius:12px; background:#f2f5f3; color:var(--muted); font-size:1rem; line-height:1; }
.ingredient-lock.is-locked { background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 0 0 2px rgba(9,88,65,.1); }
.ingredient-lock:focus-visible { outline:3px solid rgba(9,88,65,.22); outline-offset:2px; }
.remove-ingredient { min-height:42px; border:0; border-radius:10px; color:#9c3c24; background:#f6e8e3; font-size:1.15rem; cursor:pointer; }
.ingredient-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:9px; }
.add-ingredient, .auto-portion { border-radius:10px; padding:10px 12px; width:100%; font:inherit; font-weight:800; cursor:pointer; }
.add-ingredient { border:1px dashed #a8bcb1; color:var(--primary); background:transparent; }
.auto-portion { border:0; color:white; background:var(--primary); }
.auto-portion:disabled { cursor:not-allowed; opacity:.45; }
.random-portion { grid-column:1/-1; border:0; border-radius:10px; padding:11px 12px; width:100%; color:var(--primary); background:#dcece4; font:inherit; font-weight:850; cursor:pointer; }
.auto-portion-message { min-height:18px; margin:7px 0 0; color:var(--primary); font-size:.74rem; font-weight:700; }
.consumed-row { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:12px; background:#edf4ef; border-radius:11px; }
.consumed-item { display:flex; flex-direction:column; gap:3px; }
.consumed-item span { color:var(--muted); font-size:.7rem; }
.consumed-item strong { font-size:.88rem; }
.remaining-list { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.remaining-chip { padding:7px 9px; border-radius:999px; background:#e3f0e8; color:var(--primary); font-size:.75rem; font-weight:800; }
.remaining-chip.over { color:#9c3c24; background:#f6e8e3; }
.remaining-chip.done { color:#53665d; background:#e8ece9; }
.app-tabbar { display:none; }
.mobile-save-panel { display:none; }
@media (min-width:900px) {
  .calculator .field-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .client-workspace .compact-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .meal-list { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
  .meal-total-row { justify-content:flex-start; gap:12px; padding-right:250px; }
  #admin-panel { width:min(100%,960px); margin:0 auto; }
}
@media (min-width:600px) and (max-width:899px) {
  .shell { padding-top:72px; }
  .field-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .card { padding:22px; }
}
@media (max-width:599px) {
  #app .mobile-page-hidden { display:none !important; }
  .mobile-save-panel { display:block; margin-top:16px; }
  .mobile-save-panel .button { width:100%; margin-top:12px; }
  .mobile-client-save-fields { display:grid; gap:10px; }
  #personal-history #save-personal-record,
  #personal-history .personal-remark-label,
  #personal-history > #personal-history-message,
  #client-workspace .client-actions,
  #client-workspace .compact-grid { display:none; }
  .language-switcher { position:absolute; top:8px; right:8px; }
  .language-switcher select { width:62px; padding:3px 22px 3px 7px; }
  body { background:linear-gradient(180deg,#eaf2ed 0,#f4f6f4 180px); }
  .shell { padding:0 12px calc(92px + var(--safe-bottom)); }
  #app { max-width:520px; margin:0 auto; }
  h1 { font-size:clamp(1.85rem,9vw,2.45rem); }
  #app > .topbar { position:sticky; top:0; z-index:20; margin:0 -12px 14px; padding:calc(14px + env(safe-area-inset-top, 0px)) 16px 13px; flex-direction:column; align-items:stretch; gap:10px; background:rgba(242,247,244,.92); border-bottom:1px solid rgba(220,228,221,.9); backdrop-filter:blur(16px); }
  .topbar h1 { font-size:1.65rem; }
  .account-actions { display:grid; grid-template-columns:auto auto auto; align-items:center; justify-content:end; justify-items:end; gap:6px; }
  .account-actions .plan-badge { grid-column:2; grid-row:1; padding:7px 9px; white-space:nowrap; }
  .account-actions .language-switcher { position:static; grid-column:1; padding:4px 6px; box-shadow:none; backdrop-filter:none; }
  .account-actions .language-switcher span { display:none; }
  .account-actions .language-switcher select { width:62px; min-height:36px; padding:3px 22px 3px 7px; }
  .account-actions .logout-button { grid-column:3; grid-row:1; padding:9px 10px; }
  .field-grid { grid-template-columns:1fr; }
  #auto-target-fields { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 7px; }
  #auto-target-fields > label:nth-child(-n+6) { display:flex; min-width:0; flex-direction:column; gap:5px; text-align:center; font-size:.72rem; line-height:1.2; }
  #auto-target-fields > label:nth-child(-n+6) .field-label { display:flex; min-height:2.4em; align-items:flex-end; justify-content:center; }
  #auto-target-fields > label:nth-child(-n+6) input,
  #auto-target-fields > label:nth-child(-n+6) select { width:100%; min-width:0; height:52px; min-height:52px; padding:7px 9px; text-align:center; text-align-last:center; border-radius:13px; font-size:.78rem; }
  #auto-target-fields > label:nth-child(4) { order:1; }
  #auto-target-fields > label:nth-child(2) { order:2; }
  #auto-target-fields > label:nth-child(3) { order:3; }
  #auto-target-fields > label:nth-child(1) { order:4; }
  #auto-target-fields > label:nth-child(5) { order:5; }
  #auto-target-fields > label:nth-child(6) { order:6; }
  #auto-target-fields > label:nth-child(n+7) { grid-column:1/-1; order:7; }
  .logout-button { white-space:nowrap; }
  html[lang="ms"] .topbar h1 { font-size:clamp(1.05rem,4.7vw,1.3rem); letter-spacing:-.025em; white-space:nowrap; }
  html[lang="ms"] #auto-target-fields > label:nth-child(-n+6) { font-size:.68rem; }
  html[lang="ms"] #auto-target-fields > label:nth-child(-n+6) input,
  html[lang="ms"] #auto-target-fields > label:nth-child(-n+6) select { padding-inline:7px; font-size:.72rem; }
  .card { padding:17px; border:0; border-radius:20px; box-shadow:0 10px 32px rgba(20,53,43,.07); }
  .calculator { scroll-margin-top:88px; }
  #results, #meal-planner, #client-workspace { scroll-margin-top:88px; }
  input, select, textarea { min-height:52px; border-radius:13px; background:#fbfcfb; }
  select { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  .button { min-height:52px; border-radius:15px; }
  .calorie-card { border-radius:22px; background:linear-gradient(145deg,#0b4f3a,#167054); box-shadow:0 16px 34px rgba(11,79,58,.22); }
  .calories { font-size:3rem; }
  .macro-grid { gap:7px; }
  .macro { padding:14px 10px; border-radius:17px; box-shadow:none; }
  .macro strong { font-size:1.2rem; }
  .meal-macros { grid-template-columns:repeat(2,1fr); }
  .week-actions, .week-settings-grid { grid-template-columns:1fr; }
  .carb-cycle-panel { padding:15px 0 2px; border-top:1px solid var(--line); }
  .carb-cycle-panel .section-heading { margin-bottom:4px; }
  .carb-cycle-panel .fineprint { margin:8px 0 12px; line-height:1.55; }
  .carb-cycle-days { display:block; margin-top:8px; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#fff; }
  .carb-cycle-days label { min-height:55px; padding:8px 10px; display:grid; grid-template-columns:minmax(54px,1fr) 88px 104px; align-items:center; gap:7px; border-bottom:1px solid #edf1ee; font-size:.88rem; font-weight:800; }
  .carb-cycle-days label:last-child { border-bottom:0; }
  .carb-cycle-days label > span { margin:0; }
  .carb-cycle-days select { width:100%; min-width:0; min-height:38px; height:38px; padding:5px 24px 5px 8px; border:0; border-radius:999px; text-align:center; text-align-last:center; font-size:.78rem; font-weight:850; }
  .carb-cycle-days .cycle-training-select { margin:0; font-size:.72rem; background-color:#f1f5f3; }
  .carb-cycle-days .cycle-type-select[data-cycle-type="high"] { color:#fff; background-color:#0b4f3a; }
  .carb-cycle-days .cycle-type-select[data-cycle-type="medium"] { color:#155942; background-color:#dceee5; }
  .carb-cycle-days .cycle-type-select[data-cycle-type="low"] { color:#596b63; background-color:#edf1ef; }
  .carb-cycle-summary { display:grid; grid-template-columns:1fr; gap:10px; margin:14px 0 0; padding:0; overflow:visible; }
  .cycle-summary-card { min-height:0; padding:12px 14px; border:1px solid var(--line); border-radius:14px; }
  .cycle-summary-card strong { display:flex; align-items:baseline; justify-content:flex-start; gap:0; font-size:.96rem; line-height:1.3; }
  .cycle-summary-card strong span::after { content:" · "; }
  .cycle-summary-card strong b { font-size:.96rem; }
  .cycle-summary-card .cycle-summary-macros { display:flex; flex-wrap:wrap; gap:0; margin-top:4px; }
  .cycle-summary-macros i { display:inline; color:var(--muted); font-size:.72rem; line-height:1.35; }
  .cycle-summary-macros i + i::before { content:" · "; }
  .cycle-summary-card.cycle-high { background:#e7f1ec; }
  .cycle-summary-card.cycle-medium { background:#eef5f1; }
  .cycle-summary-card.cycle-low { background:#f3f5f4; }
  .cycle-admin-grid { grid-template-columns:1fr; }
  .week-actions #random-week, .week-actions .clear-week-foods, .week-actions .cycle-generate-control { grid-column:auto; }
  .meal-total-row { top:calc(var(--mobile-topbar-height, 88px) + 6px); }
  .meal-planner.week-mode-active .meal-total-row { top:calc(var(--mobile-topbar-height, 88px) + 76px); }
  .week-controls.week-sticky-active .week-day-tabs { top:calc(var(--mobile-topbar-height, 88px) + 6px); }
  .mobile-meal-tabs { position:sticky; z-index:17; top:calc(var(--mobile-topbar-height, 88px) + 64px); display:flex; gap:7px; margin:12px 0 8px; padding:8px; overflow-x:auto; background:rgba(242,247,244,.96); border:1px solid var(--line); border-radius:14px; box-shadow:0 7px 18px rgba(20,53,43,.08); scrollbar-width:none; backdrop-filter:blur(12px); }
  .mobile-meal-tabs::-webkit-scrollbar { display:none; }
  .mobile-meal-tab { flex:1 0 auto; min-width:72px; min-height:42px; padding:8px 11px; border:1px solid var(--line); border-radius:10px; color:var(--primary); background:#fff; font:inherit; font-size:.78rem; font-weight:850; cursor:pointer; }
  .mobile-meal-tab.active { color:#fff; border-color:var(--primary); background:var(--primary); }
  .meal-planner:has(.meal-total-row.is-complete) .mobile-meal-tabs { top:calc(var(--mobile-topbar-height, 88px) + 6px); }
  .meal-planner.week-mode-active .mobile-meal-tabs { top:calc(var(--mobile-topbar-height, 88px) + 134px); }
  .meal-planner.week-mode-active:has(.meal-total-row.is-complete) .mobile-meal-tabs { top:calc(var(--mobile-topbar-height, 88px) + 76px); }
  .meal-list .meal-row { display:none; }
  .meal-list .meal-row.is-mobile-active { display:block; }
  .ingredient-row { grid-template-columns:minmax(0,1fr) 44px minmax(88px,.42fr) 44px; gap:8px; }
  .ingredient-row label { min-width:0; }
  .ingredient-row select, .ingredient-row input, .remove-ingredient, .ingredient-lock { min-height:46px; height:46px; }
  .consumed-row { grid-template-columns:repeat(2,1fr); }
  .phone-search, .user-row { grid-template-columns:1fr; }
  .food-category-items { grid-template-columns:1fr; }
  .food-price-row { grid-template-columns:minmax(0,1fr) 105px; }
  .food-price-row .custom-food-actions { grid-column:1/-1; justify-content:flex-end; }
  .history-item { grid-template-columns:1fr; }
  .history-actions { width:100%; }
  .history-actions button { flex:1; }
  .app-tabbar { position:fixed; z-index:40; left:50%; bottom:0; display:grid; grid-template-columns:repeat(4,1fr); width:min(100%,520px); padding:8px 10px calc(8px + var(--safe-bottom)); transform:translateX(-50%); background:rgba(255,255,255,.95); border-top:1px solid var(--line); box-shadow:0 -10px 30px rgba(20,53,43,.08); backdrop-filter:blur(18px); }
  .app-tabbar:has(.app-tab.hidden) { grid-template-columns:repeat(3,1fr); }
  .app-tab { display:flex; min-height:52px; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:0; border-radius:14px; color:#718078; background:transparent; font:inherit; cursor:pointer; }
  .app-tab span { font-size:1.5rem; line-height:1; }
  .app-tab small { font-size:.76rem; font-weight:800; }
  .app-tab.active { color:var(--primary); background:var(--primary-soft); }
  .client-workspace.hidden + .calculator { margin-top:8px; }
  .onboarding { min-height:auto; padding:24px 6px 10px; justify-content:flex-start; }
  .onboarding h1 { font-size:1.8rem; }
  .install-intro { margin:12px 0 22px; font-size:1rem; }
  .install-steps li { grid-template-columns:40px 44px minmax(0,1fr); min-height:74px; padding:11px 13px; border-radius:18px; }
  .step-number, .step-icon { width:40px; height:40px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *::before, *::after { transition:none !important; } }

/* Demo visual refresh — original Macro Plan palette, upgraded hierarchy only. */
:root {
  --ink:#12392e;
  --muted:#63766f;
  --paper:#f1f5f2;
  --card:#ffffff;
  --line:#d7e2db;
  --primary:#0b563f;
  --primary-strong:#073f30;
  --primary-soft:#e5f0ea;
  --surface-soft:#f7faf8;
  --shadow-sm:0 8px 24px rgba(10,63,47,.06);
  --shadow-md:0 18px 46px rgba(10,63,47,.10);
}
body {
  min-height:100vh;
  background:
    radial-gradient(circle at 8% 0%,rgba(11,86,63,.08),transparent 28rem),
    radial-gradient(circle at 92% 14%,rgba(212,154,35,.06),transparent 24rem),
    var(--paper);
}
.shell { width:min(100%,1220px); padding-inline:clamp(16px,3.4vw,44px); }
.language-switcher { padding:7px 9px; border-color:rgba(199,216,206,.9); border-radius:14px; box-shadow:var(--shadow-sm); }
.language-switcher select { color:var(--ink); }
.eyebrow { color:#28745d; letter-spacing:.16em; }
h1,h2,h3,h4 { text-wrap:balance; }
h1 { color:var(--primary-strong); }
.topbar {
  position:relative;
  padding:22px 24px;
  overflow:hidden;
  background:linear-gradient(135deg,#ffffff 0%,#eef6f1 100%);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow-sm);
}
.topbar::after {
  content:"";
  position:absolute;
  top:-54px;
  right:18%;
  width:150px;
  height:150px;
  border-radius:50%;
  background:rgba(11,86,63,.06);
  pointer-events:none;
}
.account-actions { position:relative; z-index:1; }
.plan-badge { padding:9px 13px; background:#dcece4; border:1px solid #c8ded2; }
.small-button,.load-record,.edit-food { min-height:42px; border-radius:12px; }
.button,.auto-portion,.add-ingredient,.random-portion {
  min-height:48px;
  border-radius:14px;
  letter-spacing:.01em;
}
.primary,.auto-portion {
  background:linear-gradient(135deg,var(--primary),var(--primary-strong));
  box-shadow:0 10px 22px rgba(7,63,48,.16);
}
.primary:hover,.auto-portion:hover { box-shadow:0 13px 28px rgba(7,63,48,.22); transform:translateY(-1px); }
.secondary,.small-button,.load-record,.edit-food,.random-portion { background:#e4f0ea; }
.button:focus-visible,.small-button:focus-visible,.role-option:focus-visible,.meal-mode-button:focus-visible,.week-day-tab:focus-visible,.app-tab:focus-visible {
  outline:3px solid rgba(11,86,63,.22);
  outline-offset:3px;
}
.card {
  margin:20px 0;
  padding:clamp(20px,2.4vw,28px);
  border-color:rgba(207,222,213,.92);
  border-radius:24px;
  box-shadow:var(--shadow-sm);
}
.card:hover { border-color:#c5d9ce; }
.section-heading { align-items:center; padding-bottom:14px; border-bottom:1px solid #e5ece8; }
.section-heading h2 { color:var(--primary-strong); }
label { color:#284e42; }
input,select,textarea {
  min-height:50px;
  padding:11px 14px;
  border-color:#d5e0d9;
  border-radius:13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
input:hover,select:hover,textarea:hover { border-color:#b9cec2; }
input:focus,select:focus,textarea:focus { border-color:#468a73; box-shadow:0 0 0 4px rgba(11,86,63,.10); }
.auth-gate {
  min-height:auto;
  margin-block:clamp(28px,8vh,82px);
  padding:clamp(26px,4vw,42px);
  background:rgba(255,255,255,.94);
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow-md);
}
.auth-gate .lead { margin-block:16px 24px; }
.auth-form { gap:16px; }
.onboarding { width:min(100%,620px); margin:0 auto; }
.install-steps li { border-radius:18px; box-shadow:var(--shadow-sm); }
.step-number { color:var(--primary); background:var(--primary-soft); }
.step-icon { color:var(--primary); background:#f0f5f2; }
.calorie-card {
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,#0b563f,#073d2e);
  box-shadow:0 20px 42px rgba(7,63,48,.22);
}
.calorie-card::after {
  content:"";
  position:absolute;
  right:-76px;
  bottom:-108px;
  width:240px;
  height:240px;
  border:36px solid rgba(255,255,255,.05);
  border-radius:50%;
  pointer-events:none;
}
.calorie-card > * { position:relative; z-index:1; }
.macro-grid { gap:12px; }
.macro { position:relative; overflow:hidden; border-top:4px solid transparent; }
.macro.protein { border-top-color:var(--protein); }
.macro.fat { border-top-color:var(--fat); }
.macro.carb { border-top-color:var(--carb); }
.meal-mode-toggle { padding:6px; border:1px solid #d4e1d9; border-radius:16px; }
.meal-mode-button { border-radius:11px; }
.meal-mode-button.active { box-shadow:0 8px 18px rgba(11,79,58,.18); }
.week-controls,.carb-cycle-panel,.daily-ingredient-summary {
  background:linear-gradient(180deg,#f9fbfa,#f3f8f5);
  border-color:#d4e1d9;
  border-radius:20px;
}
.week-day-tab { border-radius:13px; box-shadow:0 3px 9px rgba(11,79,58,.04); }
.week-day-tab.active { box-shadow:0 8px 18px rgba(11,79,58,.18); }
.meal-list { gap:16px; }
.meal-row {
  padding:18px;
  background:#fff;
  border-color:#d7e3dc;
  border-radius:18px;
  box-shadow:0 7px 20px rgba(11,79,58,.055);
}
.meal-row-head { padding-bottom:13px; border-bottom:1px solid #e7ede9; }
.meal-name { color:var(--primary-strong); font-size:1.05rem; }
.ingredient-row { padding:8px; background:#f7faf8; border:1px solid #e0e9e3; border-radius:14px; }
.ingredient-lock,.remove-ingredient { border-radius:12px; }
.consumed-row { background:#eaf3ee; border:1px solid #dbe9e1; border-radius:14px; }
.daily-total-banner,.weekly-cost-total { background:linear-gradient(135deg,var(--primary),var(--primary-strong)); border-radius:16px; }
.daily-ingredient-summary-item { background:#e5f0ea; border:1px solid #d8e7df; border-radius:13px; }
.history-item,.client-search-result,.food-price-row { background:#fbfcfb; border-radius:14px; }
.remaining-chip { padding:8px 11px; }

@media (min-width:900px) {
  .calculator,.meal-planner,.client-workspace { scroll-margin-top:24px; }
  .meal-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
}
@media (max-width:599px) {
  body { background:linear-gradient(180deg,#e6f0ea 0,#f2f6f3 210px); }
  .shell { padding-inline:12px; }
  #app > .topbar {
    margin-bottom:16px;
    padding:calc(15px + env(safe-area-inset-top,0px)) 16px 14px;
    background:rgba(245,249,246,.94);
    border-width:0 0 1px;
    border-radius:0 0 22px 22px;
    box-shadow:0 8px 24px rgba(11,79,58,.07);
  }
  #app > .topbar::after { display:none; }
  .topbar h1 { font-size:1.58rem; }
  .card { margin:14px 0; padding:18px; border-radius:22px; box-shadow:0 9px 28px rgba(11,79,58,.07); }
  .auth-gate { min-height:calc(100svh - 110px); margin:18px 0; padding:24px 20px; border-radius:26px; }
  .macro-grid { gap:8px; }
  .macro { padding:14px 9px; }
  .meal-row { padding:15px; border-radius:18px; }
  .ingredient-row { padding:7px; }
  .app-tabbar { padding-top:9px; border-radius:22px 22px 0 0; box-shadow:0 -12px 32px rgba(11,79,58,.11); }
  .app-tab { min-height:54px; }
  .app-tab.active { box-shadow:inset 0 0 0 1px rgba(11,79,58,.07); }
}