:root { --ink:#15352b; --muted:#65756f; --paper:#f7f8f4; --card:#fff; --line:#dce4dd; --primary:#0b4f3a; --protein:#d96943; --fat:#d49a23; --carb:#3d8b9d; }
* { 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; }
.shell { width:min(100%, 1160px); margin:0 auto; padding:28px clamp(16px,3vw,36px) 64px; }
.hidden { display:none !important; }
.onboarding { min-height:80vh; display:flex; flex-direction:column; justify-content:center; }
.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; }
.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; }
.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; }
.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; }
.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; }
.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; }
label { display:flex; flex-direction:column; gap:7px; font-weight:700; font-size:.9rem; }
input, select { 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; }
input:focus, select:focus { outline:none; border-color:#4f8a75; box-shadow:0 0 0 3px rgba(11,79,58,.11); }
.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; }
.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-count-label { margin:18px 0; }
.meal-total-row { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
#meal-total { color:var(--primary); font-weight:800; }
#meal-total.invalid { color:#9c3c24; }
.meal-list { display:grid; gap:12px; margin-top:14px; }
.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-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; }
.ingredient-row { display:grid; grid-template-columns:minmax(0,1fr) 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; }
.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; }
.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; }
@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; }
  #admin-panel { width:min(100%,960px); margin:0 auto; }
}
@media (min-width:600px) and (max-width:899px) {
  .shell { padding-top:24px; }
  .field-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .card { padding:22px; }
}
@media (max-width:599px) {
  .shell { padding:18px 12px 42px; }
  h1 { font-size:clamp(1.85rem,9vw,2.45rem); }
  .topbar { align-items:center; gap:10px; }
  .topbar h1 { font-size:1.65rem; }
  .account-actions { flex-direction:column; align-items:flex-end; }
  .field-grid { grid-template-columns:1fr; }
  .card { padding:16px; border-radius:15px; }
  .macro-grid { gap:7px; }
  .macro { padding:13px 10px; }
  .macro strong { font-size:1.2rem; }
  .meal-macros { grid-template-columns:repeat(2,1fr); }
  .ingredient-row { grid-template-columns:minmax(0,1fr) 82px 38px; }
  .consumed-row { grid-template-columns:repeat(2,1fr); }
  .phone-search, .user-row { grid-template-columns:1fr; }
  .history-item { grid-template-columns:1fr; }
  .history-actions { width:100%; }
  .history-actions button { flex:1; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *::before, *::after { transition:none !important; } }