:root {
  color-scheme: light;
  --bg: #f4f1e8;
  --surface: #fffdf8;
  --surface-soft: #ebe8df;
  --text: #18221d;
  --muted: #69736d;
  --line: rgba(24, 34, 29, 0.11);
  --green: #174f39;
  --green-2: #2f7657;
  --green-soft: #e2eee7;
  --yellow: #f2c94c;
  --yellow-soft: #fff4c6;
  --warm: #a65d2d;
  --warm-soft: #fff0e3;
  --danger: #9c4539;
  --radius: 22px;
  --shadow: 0 16px 44px rgba(25, 44, 34, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(1.75rem, 5vw, 2.35rem); letter-spacing: -0.045em; line-height: 1; }
h2 { font-size: 1.18rem; letter-spacing: -0.025em; line-height: 1.15; }

.shell {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: max(22px, env(safe-area-inset-top)) 18px max(48px, calc(env(safe-area-inset-bottom) + 30px));
}
.shell > * + * { margin-top: 22px; }
.header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 5px 2px 0; }
.header .muted { margin-top: 8px; }
.eyebrow { color: var(--green-2); font-size: 0.66rem; font-weight: 850; letter-spacing: 0.14em; }
.header .eyebrow { margin-bottom: 8px; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.sr-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.icon-button {
  width: 43px; height: 43px; border: 1px solid var(--line); border-radius: 15px;
  background: rgba(255, 253, 248, 0.72); color: var(--green); font-size: 1.35rem;
}

.nutrition-card {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden; border-radius: 24px; background: var(--green);
  color: #fff; box-shadow: 0 20px 44px rgba(23, 79, 57, 0.2);
}
.nutrition-metric { min-width: 0; padding: 18px 16px 17px; }
.nutrition-metric + .nutrition-metric { border-left: 1px solid rgba(255,255,255,0.2); }
.nutrition-metric > span { display: block; margin-bottom: 8px; color: rgba(255,255,255,0.63); font-size: 0.66rem; font-weight: 800; text-transform: uppercase; }
.nutrition-metric strong { display: flex; min-width: 0; align-items: baseline; gap: 6px; white-space: nowrap; }
.nutrition-metric b { font-size: 1.55rem; font-variant-numeric: tabular-nums; font-weight: 820; letter-spacing: -0.045em; }
.nutrition-metric em { color: var(--yellow); font-size: 0.73rem; font-style: normal; font-variant-numeric: tabular-nums; font-weight: 850; }

.minerals-card { margin-top: 10px !important; border: 1px solid rgba(23,79,57,0.11); border-radius: 18px; background: rgba(255,253,248,0.78); }
.minerals-card summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; list-style: none; cursor: pointer; }
.minerals-card summary::-webkit-details-marker { display: none; }
.minerals-card summary > span { display: flex; align-items: center; gap: 8px; font-size: 0.83rem; font-weight: 760; }
.minerals-card summary i { color: var(--green-2); font-size: 1rem; font-style: normal; }
.minerals-card summary small { color: var(--muted); font-size: 0.72rem; }
.minerals-card summary::after { content: "⌄"; color: var(--muted); transition: transform 180ms cubic-bezier(.2,.8,.2,1); }
.minerals-card[open] summary::after { transform: rotate(180deg); }
.minerals-body { padding: 3px 15px 15px; }
.mineral-consumed { margin-bottom: 12px; color: var(--green); font-size: 0.77rem; line-height: 1.45; }
.mineral-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.mineral-item { padding: 10px 11px; border-radius: 13px; background: var(--green-soft); }
.mineral-item small { display: block; color: var(--muted); font-size: 0.64rem; }
.mineral-item strong { display: block; margin-top: 3px; font-size: 0.82rem; }
.mineral-sources { margin-top: 12px; color: var(--muted); font-size: 0.68rem; line-height: 1.5; }
.mineral-sources a { color: var(--green-2); }

.countdown-card {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 126px; padding: 22px; border: 1px solid rgba(23,79,57,0.08); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow);
}
.countdown-card strong { display: block; margin-top: 7px; font-size: clamp(1.65rem, 6vw, 2.45rem); letter-spacing: -0.05em; }
.countdown-card small { display: block; margin-top: 5px; color: var(--muted); font-size: 0.72rem; line-height: 1.4; }
.countdown-label { color: var(--green-2); font-size: 0.69rem; font-weight: 820; text-transform: uppercase; letter-spacing: 0.08em; }
.countdown-mark { flex: 0 0 auto; padding: 10px 9px; border: 1px solid rgba(23,79,57,0.14); border-radius: 14px; color: var(--green); font-size: 0.82rem; font-weight: 850; }

.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 11px; }
.section-heading .eyebrow { margin-bottom: 6px; }
.section-total { flex: 0 0 auto; color: var(--green); font-size: 0.76rem; font-weight: 780; }

.drinks-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.drink-card { padding: 15px; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); }
.drink-card.water-card { grid-column: 1 / -1; }
.drink-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.drink-name { display: flex; align-items: center; gap: 8px; font-size: 0.91rem; font-weight: 780; }
.drink-icon { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 9px; background: var(--green-soft); color: var(--green); }
.product-counter { color: var(--muted); font-size: 0.69rem; white-space: nowrap; }
.drink-controls { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-top: 14px; }
.drink-controls select { min-width: 0; }
.drink-add { min-width: 44px; border: 0; border-radius: 13px; background: var(--green); color: #fff; font-size: 1.08rem; font-weight: 700; }

input, textarea, select {
  width: 100%; border: 1px solid rgba(24,34,29,0.14); border-radius: 13px;
  background: #fff; color: var(--text); padding: 11px 12px; outline: none;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(47,118,87,0.1); }

.menu-list { display: grid; gap: 9px; }
.menu-card {
  width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px;
  padding: 15px 16px; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); color: var(--text); text-align: left;
}
.menu-card .meal { display: block; margin-bottom: 5px; color: var(--green-2); font-size: 0.65rem; font-weight: 850; letter-spacing: 0.09em; text-transform: uppercase; }
.menu-card .dish-name { display: block; font-size: 0.91rem; font-weight: 760; line-height: 1.3; }
.menu-card .dish-meta { display: block; margin-top: 6px; color: var(--muted); font-size: 0.68rem; line-height: 1.4; }
.menu-card .dish-state { display: flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; border: 1px solid rgba(23,79,57,0.17); border-radius: 14px; color: var(--green); font-size: 1rem; font-weight: 850; }
.menu-card.consumed { border-color: rgba(23,79,57,0.18); background: var(--green-soft); }
.menu-card.consumed .dish-state { border-color: var(--green); background: var(--green); color: #fff; }
.menu-card.consumed .dish-state time { font-size: 0.62rem; }

.chat-shell { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.chat-messages { display: grid; gap: 10px; max-height: 540px; padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
.chat-message { max-width: 88%; padding: 11px 13px; border-radius: 16px; font-size: 0.83rem; line-height: 1.46; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-message.user { justify-self: end; border-bottom-right-radius: 5px; background: var(--green); color: #fff; }
.chat-message.assistant { justify-self: start; border-bottom-left-radius: 5px; background: var(--surface-soft); }
.chat-message-meta { display: block; margin-top: 5px; opacity: 0.6; font-size: 0.61rem; }
.proposal-card { justify-self: stretch; padding: 14px; border: 1px solid rgba(23,79,57,0.17); border-radius: 17px; background: #fff; }
.proposal-card h3 { margin: 0; font-size: 0.96rem; line-height: 1.3; }
.proposal-quantity { margin-top: 5px; color: var(--muted); font-size: 0.72rem; }
.proposal-macros { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; margin-top: 12px; }
.proposal-macros span { padding: 8px 5px; border-radius: 10px; background: var(--green-soft); text-align: center; }
.proposal-macros small { display: block; color: var(--muted); font-size: 0.59rem; }
.proposal-macros strong { display: block; margin-top: 2px; font-size: 0.79rem; }
.proposal-source { margin-top: 10px; color: var(--muted); font-size: 0.66rem; line-height: 1.45; }
.proposal-source a { color: var(--green-2); }
.proposal-confirm { width: 100%; margin-top: 12px; }
.proposal-card.saved { background: var(--green-soft); }
.proposal-card.saved .proposal-confirm { display: none; }
.chat-attachment { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 14px 10px; padding: 9px 11px; border-radius: 13px; background: var(--yellow-soft); font-size: 0.74rem; }
.chat-attachment button { border: 0; background: transparent; color: var(--danger); font-weight: 750; }
.chat-form { padding: 12px; background: rgba(244,241,232,0.55); }
.chat-shell.has-messages .chat-form { border-top: 1px solid var(--line); }
.chat-form textarea { min-height: 62px; max-height: 160px; resize: none; background: #fff; }
.chat-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.attach-button { border: 0; background: transparent; color: var(--green-2); font-size: 0.76rem; font-weight: 760; }
.chat-send { min-height: 40px; padding: 8px 15px; border: 0; border-radius: 13px; background: var(--green); color: #fff; font-size: 0.78rem; font-weight: 790; }
.chat-shell > .compact-note { min-height: 0; margin: 0; padding: 0 14px 11px; }

.missing-card { padding: 18px; border: 1px solid rgba(166,93,45,0.2); border-radius: var(--radius); background: var(--warm-soft); }
.missing-card h2 { margin-top: 6px; }
.missing-card .muted { margin-top: 8px; font-size: 0.8rem; line-height: 1.45; }
.missing-actions { display: grid; grid-template-columns: 1.15fr 1fr; gap: 8px; margin-top: 14px; }

.primary-button, .secondary-button {
  min-height: 46px; padding: 10px 14px; border-radius: 14px; font-weight: 780;
}
.primary-button { border: 0; background: var(--green); color: #fff; }
.secondary-button { border: 1px solid rgba(23,79,57,0.19); background: var(--green-soft); color: var(--green); }
.primary-button:disabled, .secondary-button:disabled, .drink-add:disabled, .chat-send:disabled { opacity: 0.48; }

.bottom-card, .report-card { padding: 18px; border: 1px solid rgba(23,79,57,0.08); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.bottom-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; }
.bottom-summary::-webkit-details-marker { display: none; }
.bottom-summary span:first-child { min-width: 0; }
.bottom-summary small { display: block; margin-bottom: 5px; color: var(--green-2); font-size: 0.63rem; font-weight: 850; letter-spacing: 0.1em; }
.bottom-summary strong { display: block; overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.bottom-summary::after { content: "⌄"; color: var(--muted); transition: transform 180ms cubic-bezier(.2,.8,.2,1); }
.measurement-card[open] .bottom-summary::after { transform: rotate(180deg); }
.bottom-content { padding-top: 13px; }
.measurement-meta { line-height: 1.45; font-size: 0.8rem; }
.measurement-last { margin-top: 13px; padding: 13px; border-radius: 15px; background: var(--surface-soft); }
.measurement-last p { color: var(--muted); font-size: 0.74rem; }
.measurement-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; margin-top: 9px; }
.measurement-metrics span { min-width: 0; padding: 8px; border-radius: 11px; background: rgba(255,255,255,0.75); }
.measurement-metrics small { display: block; overflow: hidden; color: var(--muted); font-size: 0.59rem; text-overflow: ellipsis; white-space: nowrap; }
.measurement-metrics strong { display: block; margin-top: 3px; font-size: 0.88rem; }
.measurement-metrics em { display: block; margin-top: 2px; color: var(--muted); font-size: 0.61rem; font-style: normal; }
.measurement-actions { display: grid; grid-template-columns: 1.25fr 1fr; gap: 8px; margin-top: 13px; }
.compact-note { min-height: 1em; margin-top: 9px; font-size: 0.72rem; line-height: 1.4; }
.status-badge { flex: 0 0 auto; padding: 6px 8px; border-radius: 999px; font-size: 0.6rem; font-weight: 850; letter-spacing: 0.07em; }
.status-badge.ok { color: var(--green); background: var(--green-soft); }
.status-badge.due { color: var(--danger); background: #f8e4df; }
.status-badge.start { color: #625a3b; background: #eee7cf; }
.status-badge.finish { color: #4a3b63; background: #ebe3f5; }
.measurement-card.is-due { border-color: rgba(166,93,45,0.32); }

.health-heading, .report-heading { margin-bottom: 0; }
.health-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin-top: 13px; }
.health-metrics span { min-width: 0; padding: 9px; border-radius: 12px; background: var(--surface-soft); }
.health-metrics small { display: block; overflow: hidden; color: var(--muted); font-size: 0.6rem; text-overflow: ellipsis; white-space: nowrap; }
.health-metrics strong { display: block; margin-top: 3px; font-size: 0.9rem; }
.report-body { margin-top: 13px; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,0.74); font-size: 0.82rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.report-body h3 { margin: 15px 0 6px; font-size: 0.92rem; }
.report-body h3:first-child { margin-top: 0; }
.report-body p { margin: 0 0 8px; }
.report-body ol, .report-body ul { margin: 0 0 9px; padding-left: 21px; }
.report-action { width: 100%; margin-top: 11px; }

.empty-state { padding: 16px; border-radius: 15px; background: rgba(255,255,255,0.46); color: var(--muted); font-size: 0.78rem; text-align: center; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 0.72rem; font-weight: 720; }
.measurement-dialog, .login-dialog { width: min(680px,calc(100% - 22px)); max-height: calc(100dvh - 24px); padding: 0; overflow: auto; border: 0; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.measurement-dialog::backdrop, .login-dialog::backdrop { background: rgba(12,18,15,0.58); backdrop-filter: blur(7px); }
.measurement-dialog form, .login-dialog form { padding: 21px; }
.login-dialog { width: min(420px,calc(100% - 28px)); }
.login-dialog form { display: grid; gap: 13px; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.dialog-close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface-soft); color: var(--text); font-size: 1.45rem; }
.dialog-copy { margin: 9px 0 15px; font-size: 0.8rem; line-height: 1.45; }
.review-topline { display: grid; grid-template-columns: 1fr 115px; gap: 9px; margin-bottom: 12px; }
.confidence-box { display: flex; flex-direction: column; justify-content: center; padding: 10px; border-radius: 13px; background: var(--green-soft); color: var(--green); }
.confidence-box small { font-size: 0.64rem; }
.confidence-box strong { margin-top: 3px; }
.measurement-review-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.measurement-warnings { margin-top: 12px; padding: 11px 13px; border-radius: 13px; background: var(--warm-soft); color: #744421; font-size: 0.75rem; line-height: 1.45; }
.measurement-warnings ul { margin: 6px 0 0; padding-left: 18px; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 9px; margin-top: 15px; }
.error-text { min-height: 1em; color: var(--danger); font-size: 0.78rem; }

.toast { position: fixed; left: 50%; bottom: max(18px,env(safe-area-inset-bottom)); z-index: 30; max-width: calc(100% - 30px); padding: 11px 15px; border-radius: 13px; background: #15201a; color: #fff; box-shadow: var(--shadow); text-align: center; transform: translate(-50%,120px); transition: transform 180ms cubic-bezier(.2,.8,.2,1); }
.toast.visible { transform: translate(-50%,0); }
.toast:empty { display: none; }

.icon-button, .drink-add, .menu-card, .primary-button, .secondary-button, .attach-button, .chat-send, .dialog-close {
  transition: transform 120ms cubic-bezier(.2,.8,.2,1), background-color 160ms ease-out, border-color 160ms ease-out, opacity 160ms ease-out;
}
.icon-button:active, .drink-add:active, .menu-card:not(:disabled):active, .primary-button:not(:disabled):active, .secondary-button:not(:disabled):active, .attach-button:active, .chat-send:not(:disabled):active, .dialog-close:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .menu-card:not(:disabled):hover, .drink-card:hover { border-color: rgba(23,79,57,0.27); }
  .primary-button:hover, .drink-add:hover, .chat-send:hover { background: #103d2c; }
  .secondary-button:hover { background: #d7e8de; }
}

@media (max-width: 560px) {
  .shell { padding-left: 14px; padding-right: 14px; }
  .nutrition-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nutrition-metric { padding: 17px 18px 16px; border-left: 0 !important; }
  .nutrition-metric:nth-child(even) { border-left: 1px solid rgba(255,255,255,0.2) !important; }
  .nutrition-metric:nth-child(n + 3) { border-top: 1px solid rgba(255,255,255,0.2); }
  .nutrition-metric b { font-size: 1.65rem; }
  .nutrition-metric em { font-size: 0.76rem; }
  .health-metrics, .measurement-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .measurement-actions, .missing-actions { grid-template-columns: 1fr; }
}

@media (max-width: 410px) {
  .drinks-grid { grid-template-columns: 1fr; }
  .drink-card.water-card { grid-column: auto; }
  .countdown-card { min-height: 116px; padding: 18px; }
  .countdown-mark { display: none; }
  .mineral-grid, .measurement-review-grid { grid-template-columns: 1fr; }
  .review-topline { grid-template-columns: 1fr 100px; }
}

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