:root {
  --bg: oklch(96% 0.004 240);
  --bg-app: oklch(97.3% 0.003 240);
  --surface: oklch(100% 0 0);
  --border-input: oklch(87% 0.006 240);
  --pill-bg: oklch(91% 0.004 240);
  --track-bg: oklch(90% 0.004 240);

  --text-primary: oklch(18% 0.006 240);
  --text-heading: oklch(24% 0.006 240);
  --text-body: oklch(20% 0.006 240);
  --text-secondary: oklch(50% 0.006 240);
  --text-tertiary: oklch(55% 0.006 240);
  --icon-neutral: oklch(30% 0.006 240);

  --accent: #ADFE00;
  --accent-2: #6FCF00;
  --accent-text: #1B2400;
  --accent-soft-bg: #EFFFC2;
  --accent-soft-text: #4B6B00;
  --accent-remaining: #3F5C00;
  --accent-shadow: rgba(173, 254, 0, 0.45);

  --danger: #E5484D;
  --dash-border: oklch(82% 0.008 240);
  --camera-bg: oklch(24% 0.006 240);
  --overlay: rgba(15, 17, 21, 0.45);
  --overlay-scan: rgba(0, 0, 0, 0.35);

  --macro-protein: #FF4757;
  --macro-fat: #FFD60A;
  --macro-carbs: #7267FF;

  --shadow-card: 0 10px 26px -8px rgba(20, 20, 30, .16), 0 2px 7px -2px rgba(20, 20, 30, .08);
  --shadow-card-sm: 0 6px 16px -6px rgba(20, 20, 30, .12), 0 1px 4px -1px rgba(20, 20, 30, .06);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-rounded: ui-rounded, -apple-system, "SF Pro Rounded", system-ui, sans-serif;
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  font-family: var(--font);
  letter-spacing: -0.2px;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

button, input, textarea { font-family: var(--font); letter-spacing: -0.2px; }

a { color: var(--accent); }
a:hover { color: var(--accent-2); }

input[type="range"] { accent-color: var(--accent); }

button {
  -webkit-appearance: none;
  appearance: none;
  transition: transform .12s ease, background .15s ease, color .15s ease, opacity .15s ease, box-shadow .15s ease;
}
button:active:not(:disabled) { transform: scale(0.94); }
button:disabled { cursor: default; }

#app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
  font-family: var(--font);
  position: relative;
  padding-top: max(env(safe-area-inset-top), 20px);
  padding-bottom: max(env(safe-area-inset-bottom), 12px);
  max-width: 560px;
  margin: 0 auto;
}

@keyframes om-spin { to { transform: rotate(360deg); } }
@keyframes om-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

@keyframes screen-in {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.screen-anim { animation: screen-in .32s cubic-bezier(.22, .8, .2, 1) both; }

@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.modal-backdrop {
  animation: backdrop-in .22s ease both;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}

@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal-sheet { animation: sheet-up .38s var(--ease-sheet) both; }

@keyframes fab-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.fab-anim { animation: fab-in .32s var(--ease-pop) both; }

@keyframes day-pop { 0% { transform: scale(1); } 45% { transform: scale(1.15); } 100% { transform: scale(1); } }