@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  src: url("fonts/BarlowCondensed-600.ttf") format("truetype");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  src: url("fonts/BarlowCondensed-700.ttf") format("truetype");
}

:root {
  color-scheme: light;
  --canvas: #e8e0d2;
  --paper: #f8f0e1;
  --paper-pressed: #eee2cf;
  --ink: #211f1b;
  --muted: #675f54;
  --line: #bdb2a1;
  --rail: #2c2e2b;
  --rail-muted: #c7c2b8;
  --steel: #777b76;
  --action: #ad3b2a;
  --action-pressed: #872b1f;
  --pending: #7b521b;
  --success: #356146;
  --danger: #983b32;
  --camera: #171613;
  --ticket: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: Roboto, ui-sans-serif, system-ui, sans-serif;
  --elevation: 0 3px 8px rgba(33, 31, 27, 0.18);
  font-family: var(--body);
}

* { box-sizing: border-box; }
html, body, #app { margin: 0; min-height: 100%; }
html { background: #d3cabd; }
body { background: #d3cabd; color: var(--ink); }
button, input, textarea { font: inherit; }
button { color: inherit; }
::selection { background: var(--action); color: var(--paper); }
* { scrollbar-color: var(--steel) var(--canvas); scrollbar-width: thin; }

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid #356146;
  outline-offset: 3px;
}

.device {
  background: var(--canvas);
  min-height: 100dvh;
  overflow: hidden;
  position: relative;
}

.screen {
  animation: check-in 280ms cubic-bezier(.16, 1, .3, 1) both;
  min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) 16px calc(116px + env(safe-area-inset-bottom));
}

.screen.detail,
.screen.settings,
.screen.editor { padding-bottom: max(40px, env(safe-area-inset-bottom)); }

.camera-screen {
  background: var(--camera);
  color: var(--paper);
  min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
}

@media (min-width: 700px) {
  body { padding: 24px; }
  .device { box-shadow: 0 18px 60px rgba(33, 31, 27, .22); margin: 0 auto; max-width: 430px; min-height: calc(100dvh - 48px); }
  .screen, .camera-screen { min-height: calc(100dvh - 48px); }
}

@keyframes check-in {
  from { opacity: .55; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes stamp-pulse { 50% { opacity: .35; } }

.topbar,
.row,
.day-nav,
.macro-row,
.meal-head,
.meal-meta,
.composer,
.camera-actions,
.thumbs,
.setting-row,
.detail-head { align-items: center; display: flex; }

p { margin: 0; }
h1, h2, h3 { font-family: var(--ticket); margin: 0; }
h1 { font-size: 2.15rem; line-height: 1; }
h2 { font-size: 1.45rem; line-height: 1.1; }

.topbar {
  align-items: flex-start;
  background: var(--rail);
  border-radius: 10px 10px 0 0;
  color: var(--paper);
  justify-content: space-between;
  padding: 14px 10px 2px 14px;
}

.eyebrow {
  color: var(--rail-muted);
  font-family: var(--ticket);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .09em;
  margin: 0 0 2px 4px;
  text-transform: uppercase;
}

.day-nav { margin-left: -8px; }
.day-nav h1 { min-width: 116px; text-align: center; }
.topbar .icon-btn { color: var(--paper); }
.topbar .icon-btn:hover { background: rgba(248, 240, 225, .1); }

.summary {
  background: var(--rail);
  border-radius: 0 0 10px 10px;
  color: var(--paper);
  padding: 8px 18px 18px;
}

.calories {
  font-family: var(--ticket);
  font-size: 2.7rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: .95;
}

.unit { color: var(--rail-muted); font-size: 1rem; font-weight: 600; }
.track { background: var(--steel); height: 2px; margin-top: 13px; overflow: hidden; }
.track > span { background: var(--action); display: block; height: 100%; }
.macro-row { gap: 18px; margin-top: 14px; }
.macro { flex: 1; }
.macro strong { display: block; font-size: .78rem; font-variant-numeric: tabular-nums; }
.macro small { color: var(--rail-muted); display: block; font-family: var(--ticket); font-size: .82rem; margin-top: 2px; }

.icon-btn {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  padding: 0;
  transition: background 140ms, transform 140ms;
  width: 48px;
}

.icon-btn:hover { background: rgba(33, 31, 27, .07); }
.icon-btn:active, .primary:active, .send-circle:active { transform: translateY(1px); }
.icon-btn:disabled { cursor: default; opacity: .28; }
.icon-btn svg { height: 22px; width: 22px; }

.section-title { justify-content: space-between; margin-top: 24px; }
.section-title h2 { font-size: 1.65rem; }
.count { color: var(--muted); font-family: var(--ticket); font-size: 1rem; font-variant-numeric: tabular-nums; }
.meal-list { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin-top: 9px; min-width: 0; }
.empty-line { border: 1px dashed var(--line); color: var(--muted); padding: 26px 16px; text-align: center; }

.meal {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  min-height: 118px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 14px;
  position: relative;
  text-align: left;
  transition: background 140ms, transform 140ms;
  width: 100%;
}

.meal:hover { background: var(--paper-pressed); }
.meal:active { transform: translateY(1px); }
.meal-icon {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  flex: 0 0 42px;
  height: 42px;
  justify-content: center;
}
.meal-icon svg { height: 21px; width: 21px; }
.meal-copy { flex: 1; min-width: 0; }
.meal-head { align-items: flex-start; border-bottom: 1px dashed var(--line); gap: 10px; justify-content: space-between; min-width: 0; padding-bottom: 9px; }
.meal-title { flex: 1; font-family: var(--ticket); font-size: 1.3rem; font-weight: 700; line-height: 1.03; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meal-kcal { font-family: var(--ticket); font-size: 1.05rem; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.meal-meta { color: var(--muted); font-family: var(--ticket); font-size: .86rem; gap: 10px; margin-top: 9px; }
.meal-items { color: var(--muted); display: block; font-size: .76rem; line-height: 1.4; margin-top: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status { color: var(--success); }
.dot { animation: stamp-pulse 1.6s infinite; background: var(--pending); border-radius: 50%; display: inline-block; height: 6px; margin-right: 5px; width: 6px; }

.question,
.ai-fix,
.processing {
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: 10px;
  margin-top: 16px;
  padding: 15px;
}
.question-meal { align-items: center; background: transparent; border: 0; border-bottom: 1px dashed var(--line); cursor: pointer; display: flex; margin: 0 0 13px; min-height: 52px; padding: 0 0 12px; text-align: left; width: 100%; }
.question-meal > span:nth-child(2) { flex: 1; min-width: 0; }
.question-meal strong, .question-meal small { display: block; }
.question-meal strong { font-family: var(--ticket); font-size: 1rem; }
.question-meal small { color: var(--muted); font-size: .76rem; margin-top: 2px; }
.question-meal > b { color: var(--muted); font-size: 1.4rem; font-weight: 400; }
.mini-photo { align-items: center; border: 1px solid var(--line); border-radius: 5px; display: flex; flex: 0 0 42px; height: 42px; justify-content: center; margin-right: 10px; }
.tiny-plate, .tiny-food { display: none; }
.mini-photo::before { color: var(--muted); content: "PHOTO"; font-family: var(--ticket); font-size: .62rem; }
.question-label, .ai-label { color: var(--action); font-family: var(--ticket); font-size: .9rem; font-weight: 700; letter-spacing: .03em; }
.question-text { font-size: 1rem; font-weight: 650; line-height: 1.4; margin-top: 6px; }
.composer { gap: 8px; margin-top: 12px; }

input,
textarea {
  background: var(--canvas);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ink);
  min-width: 0;
  padding: 0 13px;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.composer input { flex: 1; height: 50px; }
.send-circle { background: var(--action); border: 0; border-radius: 8px; color: var(--paper); cursor: pointer; flex: 0 0 48px; height: 48px; }
.send-circle:hover, .primary:hover { background: var(--action-pressed); }

.capture-dock { bottom: calc(14px + env(safe-area-inset-bottom)); left: 50%; position: fixed; transform: translateX(-50%); width: min(calc(100% - 32px), 398px); z-index: 10; }
.primary {
  align-items: center;
  background: var(--action);
  border: 0;
  border-radius: 8px;
  box-shadow: var(--elevation);
  color: var(--paper);
  cursor: pointer;
  display: flex;
  font-family: var(--ticket);
  font-size: 1.18rem;
  font-weight: 700;
  gap: 9px;
  height: 56px;
  justify-content: center;
  transition: background 140ms, transform 140ms;
  width: 100%;
}
.primary svg { height: 20px; width: 20px; }
.capture-dock .primary { background: var(--paper); border: 1px dashed var(--action); color: var(--action); }
.capture-dock .primary:hover { background: var(--paper-pressed); }
.secondary { background: var(--paper); border: 1px solid var(--line); box-shadow: none; color: var(--ink); }
.secondary:hover { background: var(--paper-pressed); }
.danger-secondary { color: var(--danger); }

.header { align-items: center; display: grid; grid-template-columns: 48px 1fr 92px; margin: -4px -8px 20px; }
.header h2 { font-size: 1.3rem; text-align: center; }
.header-action { background: transparent; border: 0; color: var(--action); cursor: pointer; font-family: var(--ticket); font-size: 1rem; font-weight: 700; min-height: 48px; text-align: right; }
.meal-type { color: var(--muted); font-family: var(--ticket); font-size: .92rem; }
.detail-title { font-family: var(--ticket); font-size: 2rem; line-height: 1; margin-top: 4px; }
.saved-photos { margin-top: 17px; }
.saved-photo, .review-photo, .viewfinder {
  align-items: center;
  background: #343631;
  border: 1px solid var(--steel);
  border-radius: 6px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.saved-photo { height: 150px; }
.saved-photo::before, .review-photo::before, .viewfinder::before { color: var(--rail-muted); content: "MEAL PHOTO PREVIEW"; font-family: var(--ticket); font-size: .86rem; letter-spacing: .08em; }
.saved-photo > span { background: var(--paper); bottom: 9px; color: var(--ink); font-family: var(--ticket); font-size: .75rem; left: 9px; padding: 5px 8px; position: absolute; }
.detail-total { align-items: flex-end; border-bottom: 1px dashed var(--line); display: flex; justify-content: space-between; margin-top: 21px; padding-bottom: 15px; }
.detail-total strong { font-family: var(--ticket); font-size: 1.45rem; }
.detail-total span { color: var(--muted); font-size: .75rem; }
.food-row { align-items: center; border-bottom: 1px dashed var(--line); display: flex; justify-content: space-between; padding: 14px 0; }
.food-row:last-child { border-bottom: 0; }
.food-row strong, .food-row small { display: block; }
.food-row strong { font-size: .9rem; }
.food-row small { color: var(--muted); font-size: .73rem; margin-top: 3px; }
.food-nutrition { text-align: right; }
.applied-correction, .notice { color: var(--muted); font-size: .8rem; line-height: 1.45; margin-top: 16px; }
.processing { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.processing p { color: var(--muted); flex-basis: 100%; font-size: .8rem; }

.settings-copy { color: var(--muted); font-size: .86rem; line-height: 1.5; }
.detail-copy { margin: -6px 0 20px; max-width: 36ch; }
.settings-section { margin-top: 23px; }
.settings-section:first-of-type { margin-top: 8px; }
.settings-section h3 { color: var(--muted); font-family: var(--ticket); font-size: .88rem; letter-spacing: .05em; margin: 0 0 7px 4px; text-transform: uppercase; }
.settings-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.settings-link { align-items: center; background: transparent; border: 0; border-bottom: 1px dashed var(--line); cursor: pointer; display: flex; justify-content: space-between; min-height: 66px; padding: 11px 14px; text-align: left; width: 100%; }
.settings-link:last-child { border-bottom: 0; }
.settings-link:hover { background: var(--paper-pressed); }
.settings-link > span { min-width: 0; }
.settings-link strong, .settings-link small { display: block; }
.settings-link strong { font-family: var(--ticket); font-size: 1.08rem; }
.settings-link small { color: var(--muted); font-size: .74rem; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-link b { color: var(--muted); font-size: 1.45rem; font-weight: 400; margin-left: 12px; }
.settings-link b svg { display: block; height: 18px; width: 18px; }
.goal-panel, .notification-panel { padding: 0 14px; }
.setting-row, .toggle-row { border-bottom: 1px dashed var(--line); justify-content: space-between; min-height: 64px; }
.setting-row:last-child, .toggle-row:last-child { border-bottom: 0; }
.setting-row > span { font-family: var(--ticket); font-size: 1rem; }
.number-input { align-items: center; background: var(--canvas); border-radius: 8px; display: flex; padding-right: 10px; }
.number-input input { background: transparent; height: 44px; padding-right: 5px; text-align: right; width: 74px; }
.number-input b { color: var(--muted); font-size: .72rem; }
.settings-primary { margin-top: 22px; }
.info-row { align-items: center; border-bottom: 1px dashed var(--line); display: flex; gap: 14px; justify-content: space-between; min-height: 62px; padding: 12px 14px; }
.info-row:last-child { border-bottom: 0; }
.info-row span { color: var(--muted); font-size: .78rem; }
.info-row strong { font-family: var(--ticket); font-size: .94rem; text-align: right; }
.toggle-row { align-items: center; display: flex; gap: 12px; min-height: 78px; padding: 12px 0; }
.toggle-row > span { min-width: 0; }
.toggle-row strong, .toggle-row small { display: block; }
.toggle-row strong { font-family: var(--ticket); font-size: 1rem; }
.toggle-row small { color: var(--muted); font-size: .74rem; line-height: 1.35; margin-top: 3px; max-width: 29ch; }
.toggle { background: var(--line); border: 0; border-radius: 999px; cursor: pointer; flex: 0 0 48px; height: 28px; padding: 3px; }
.toggle i { background: var(--paper); border-radius: 50%; box-shadow: 0 1px 3px rgba(33,31,27,.25); display: block; height: 22px; transform: translateX(0); transition: transform 180ms cubic-bezier(.16,1,.3,1); width: 22px; }
.toggle.checked { background: var(--action); }
.toggle.checked i { transform: translateX(20px); }
.text-action { background: transparent; border: 0; color: var(--action); cursor: pointer; display: block; font-family: var(--ticket); font-size: 1rem; font-weight: 700; margin: 22px auto 0; min-height: 48px; padding: 10px 18px; }

.choice-section { margin-top: 24px; }
.choice-section h3 { font-size: 1rem; margin: 0 0 8px 3px; }
.choice-control { background: var(--paper); border: 1px solid var(--line); border-radius: 9px; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; }
.choice-control button { background: transparent; border: 0; border-radius: 6px; cursor: pointer; min-height: 46px; }
.choice-control button.selected { background: var(--rail); color: var(--paper); font-weight: 700; }
.privacy-toggle { border-bottom: 0; padding: 12px 14px; }
.action-list { border-top: 1px solid var(--line); margin-top: 24px; }
.action-list button { background: transparent; border: 0; border-bottom: 1px dashed var(--line); color: var(--action); cursor: pointer; display: block; font-family: var(--ticket); font-size: 1rem; min-height: 52px; text-align: left; width: 100%; }
.danger-text { color: var(--danger) !important; }
.confirm-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; margin-top: 18px; padding: 16px; }
.confirm-panel strong { display: block; font-size: .9rem; line-height: 1.4; }
.confirm-panel > div { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.confirm-panel button { background: var(--canvas); border: 0; border-radius: 7px; cursor: pointer; font-weight: 700; min-height: 44px; padding: 0 15px; }
.confirm-panel .danger-fill { background: var(--danger); color: var(--paper); }
.about-mark { align-items: center; background: var(--rail); border-radius: 8px; color: var(--paper); display: flex; font-family: var(--ticket); font-size: 2rem; font-weight: 700; height: 72px; justify-content: center; margin: 24px auto 14px; width: 72px; }
.about-title { text-align: center; }
.about-copy { color: var(--muted); font-size: .9rem; line-height: 1.55; margin: 12px auto 24px; max-width: 31ch; text-align: center; }
.about-foot { color: var(--muted); font-size: .72rem; margin-top: 16px; text-align: center; }

.editor-field { display: block; min-width: 0; }
.editor-field > span, .editor-heading { color: var(--muted); display: block; font-family: var(--ticket); font-size: .84rem; letter-spacing: .03em; margin: 0 0 6px 3px; text-transform: uppercase; }
.editor-field input { background: var(--paper); height: 50px; width: 100%; }
.type-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.type-chips button { background: var(--paper); border: 1px solid var(--line); border-radius: 7px; cursor: pointer; font-family: var(--ticket); font-size: .92rem; min-height: 46px; padding: 0 14px; }
.type-chips button.selected { background: var(--rail); color: var(--paper); }
.editor-top { display: grid; gap: 9px; grid-template-columns: minmax(0,1fr) 104px; margin-top: 20px; }
.editor-heading { font-size: 1rem; margin-top: 26px; }
.item-editor { background: var(--paper); border: 1px solid var(--line); border-radius: 9px; margin-bottom: 12px; padding: 14px; }
.item-editor-head { align-items: center; display: flex; justify-content: space-between; }
.item-editor-head strong { color: var(--action); font-family: var(--ticket); font-size: .9rem; }
.item-editor-head button { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 1.4rem; min-height: 44px; min-width: 44px; }
.item-editor .editor-top { margin-top: 10px; }
.nutrition-grid { display: grid; gap: 6px; grid-template-columns: repeat(4,1fr); margin-top: 9px; }
.nutrition-grid label span { color: var(--muted); display: block; font-size: .68rem; margin: 0 0 4px 2px; }
.nutrition-grid input { background: var(--canvas); height: 44px; padding: 0 8px; width: 100%; }
.add-item { background: transparent; border: 0; color: var(--action); cursor: pointer; font-family: var(--ticket); font-size: 1rem; font-weight: 700; min-height: 48px; }

.camera-top { display: flex; justify-content: space-between; }
.camera-top .icon-btn { color: var(--paper); }
.viewfinder { height: calc(100dvh - 216px); margin-top: 14px; min-height: 380px; }
.plate, .food { display: none; }
.camera-hint { background: rgba(23,22,19,.76); bottom: 14px; color: var(--paper); font-family: var(--ticket); font-size: .82rem; padding: 7px 10px; position: absolute; }
.camera-actions { justify-content: space-around; margin-top: 17px; }
.shutter { background: var(--paper); border: 5px solid var(--camera); border-radius: 50%; box-shadow: 0 0 0 3px var(--paper); cursor: pointer; height: 68px; width: 68px; }
.camera-side { color: var(--rail-muted); font-family: var(--ticket); font-size: .8rem; width: 76px; }
.review-photo { height: 46dvh; min-height: 300px; }
.thumbs { gap: 9px; margin: 13px 0; }
.thumb { background: var(--rail); border: 2px solid var(--action); border-radius: 5px; height: 56px; width: 56px; }
.thumb:not(.selected) { border-color: transparent; opacity: .62; }
.add-photo { background: var(--paper); border: 1px dashed var(--line); border-radius: 7px; cursor: pointer; font-family: var(--ticket); font-size: .9rem; font-weight: 700; height: 56px; padding: 0 13px; }
.add-photo:disabled { cursor: default; opacity: .42; }
.remove-thumb { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 1.35rem; height: 48px; margin-left: auto; width: 44px; }
.review-note { background: var(--paper); height: 50px; width: 100%; }
.review-send { margin-top: 11px; }
.toast { animation: check-in 180ms both; background: var(--rail); border-radius: 6px; bottom: 86px; color: var(--paper); font-size: .8rem; left: 50%; padding: 10px 14px; position: absolute; transform: translateX(-50%); white-space: nowrap; }

@media (max-width: 360px) {
  .macro-row { gap: 10px; }
  .meal { padding: 12px; }
  .meal-icon { display: none; }
  .nutrition-grid { grid-template-columns: repeat(2, 1fr); }
  .editor-top { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; scroll-behavior: auto !important; transition-duration: 1ms !important; }
}