:root {
    color-scheme: light;
    --bg: #eef2ed;
    --surface: #fffdf8;
    --surface-2: #f8f7f1;
    --ink: #062f2d;
    --muted: #6d7282;
    --green: #235f4c;
    --green-strong: #174f3f;
    --sage: #e7efe3;
    --sage-strong: #cfe2c7;
    --cream: #fff3da;
    --peach: #fce6de;
    --blue: #e3f2fb;
    --lilac: #eee7f8;
    --nutrition-protein: #fdebe6;
    --nutrition-protein-icon: #fddfd8;
    --nutrition-carbs: #fdf4e1;
    --nutrition-carbs-icon: #feeccc;
    --nutrition-fats: #e4f2fe;
    --nutrition-fats-icon: #d4ebfa;
    --line: #e5e4dc;
    --danger: #a94b48;
    --past-day-text: #a5aaab;
    --white: #ffffff;
    --shadow: 0 18px 45px rgba(16, 57, 48, 0.10);
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f1d1a;
    --surface: #152420;
    --surface-2: #1d302a;
    --ink: #f0f7f3;
    --muted: #aab8b2;
    --green: #8fc8ab;
    --green-strong: #79b997;
    --sage: #243b31;
    --sage-strong: #315542;
    --cream: #423925;
    --peach: #46302c;
    --blue: #233b48;
    --lilac: #382f45;
    --nutrition-protein: #46302c;
    --nutrition-protein-icon: #5a3932;
    --nutrition-carbs: #423925;
    --nutrition-carbs-icon: #564828;
    --nutrition-fats: #233b48;
    --nutrition-fats-icon: #2b4b5a;
    --line: #30443e;
    --danger: #ef918b;
    --past-day-text: #78877f;
    --white: #1c2d27;
    --shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }

html { background: var(--bg); scroll-behavior: smooth; }

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: Inter, ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.35;
    -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.app-shell {
    position: relative;
    width: 100%;
    max-width: 430px;
    min-height: 100dvh;
    margin: 0 auto;
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 78px;
    padding: 20px 20px 10px;
}

.app-header--internal { padding-bottom: 6px; }

.brand { display: inline-flex; align-items: center; gap: 7px; font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }
.brand__tree { width: 42px; height: 42px; object-fit: contain; }
.header-actions { display: flex; align-items: center; gap: 8px; }

.reward-score, .icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    border-radius: 18px;
    background: var(--surface-2);
}

.reward-score { min-width: 40px; height: 46px; gap: 3px; padding: 0 7px; border-radius: 0; background: transparent; color: var(--ink); }
.reward-score i, .reward-note i { color: #4f855d; }
.weather i { color: #f4b93f; }
.reward-score i { font-size: 19px; }
.reward-score strong { font-size: 15px; font-weight: 750; }
.icon-button { cursor: pointer; font-size: 22px; }
.icon-button.is-active { background: var(--sage); color: var(--green-strong); }

.screen { padding: 8px 20px 34px; }
.screen--with-nav { padding-bottom: 112px; }

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 2px; font-size: clamp(38px, 11vw, 50px); line-height: 1.02; letter-spacing: -2px; }
h2 { margin-bottom: 15px; font-size: 27px; line-height: 1.1; letter-spacing: -1px; }
h3 { margin-bottom: 8px; }
.subtitle { margin-bottom: 0; color: var(--muted); font-size: 16px; }
.subtitle span { padding: 0 6px; }

.hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 12px 2px 23px; }
.hero-row--compact { align-items: center; padding-bottom: 20px; }
.hero-row--compact h1 { font-size: 36px; }
.weather { display: flex; align-items: center; gap: 7px; padding-bottom: 7px; white-space: nowrap; font-size: 15px; }
.weather i { font-size: 28px; }

.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin: 0 -2px 26px; }
.day {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 78px;
    padding: 9px 2px 5px;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    border-radius: 18px;
    background: transparent;
}
.day span { color: var(--muted); font-size: 13px; }
.day strong { margin-top: 4px; font-size: 21px; font-weight: 650; }
.day i { visibility: hidden; height: 14px; margin-top: 3px; color: var(--green); font-size: 14px; }
.day.has-entry i { visibility: visible; }
.day.is-past-empty { color: var(--past-day-text); }
.day.is-past-empty span, .day.is-past-empty strong { color: var(--past-day-text); }
.day.is-selected { background: var(--sage); }
.day.is-selected strong { font-weight: 800; }

.calendar-legend { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -16px 0 28px; color: var(--muted); font-size: 14px; }
.calendar-legend i { color: var(--green); font-size: 19px; }

.section-block { margin-top: 3px; }
.section-block + .section-block { margin-top: 26px; }
.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.quick-grid--large { margin-bottom: 28px; }
.quick-card {
    display: flex;
    min-height: 112px;
    padding: 14px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: var(--radius-lg);
    transition: transform 160ms ease, filter 160ms ease;
}
.quick-card:active { transform: scale(0.97); filter: saturate(1.1); }
.quick-card[aria-expanded="true"] { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--green) 42%, transparent); }
.quick-card--food { background: var(--cream); }
.quick-card--symptom { background: var(--peach); }
.quick-card--exposure { background: var(--sage); }
.quick-card--other { background: var(--blue); }
.quick-icon { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.48); }
.quick-icon i { font-size: 34px; }
.quick-card strong { font-size: 18px; }
.more-actions[hidden] { display: none; }
.more-actions.is-revealed { animation: reveal-more 180ms ease-out both; }
.more-actions--experiment { margin-top: -10px; }
.screen--today .more-actions--experiment,
.screen--today-popup .more-actions--experiment { margin-top: 16px; }

.more-tone--lilac { --measurement-tone: var(--lilac); --measurement-tone-strong: color-mix(in srgb, var(--lilac) 70%, #d7c2ee); --more-icon-color: #79569c; }
.more-tone--blue { --measurement-tone: var(--blue); --measurement-tone-strong: var(--nutrition-fats-icon); --more-icon-color: #347b98; }
.more-tone--sage { --measurement-tone: var(--sage); --measurement-tone-strong: var(--sage-strong); --more-icon-color: #4f855d; }
.more-tone--cream { --measurement-tone: var(--cream); --measurement-tone-strong: var(--nutrition-carbs-icon); --more-icon-color: #aa7219; }
.more-tone--peach { --measurement-tone: var(--peach); --measurement-tone-strong: var(--nutrition-protein-icon); --more-icon-color: #b35c58; }

.more-entry-swipe { display: flex; margin: 0 -20px; padding: 3px 20px 10px; overflow-x: auto; gap: 10px; cursor: grab; scroll-padding-left: 20px; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-y; user-select: none; }
.more-entry-swipe.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.more-entry-swipe::-webkit-scrollbar { display: none; }
.more-entry-swipe > button { display: flex; width: 126px; min-width: 126px; min-height: 108px; padding: 10px 7px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); scroll-snap-align: center; text-align: center; }
.more-entry-swipe > button > i { color: var(--more-icon-color, var(--green)); font-size: 31px; }
.more-entry-swipe > button > span { font-size: 15px; font-weight: 500; line-height: 1.12; }
.more-entry-swipe > button > small { color: var(--muted); font-size: 10px; }
.more-entry-swipe > button.is-selected { border-color: var(--green); background: var(--measurement-tone, var(--sage)); color: var(--green-strong); }

.more-entry-panels { margin-top: 3px; }
.more-entry-panel[hidden] { display: none; }
.more-entry-panel { animation: reveal-more 160ms ease-out both; }
.more-entry-panel .field-label:first-child { margin-top: 8px; }
.more-entry-time { margin: 16px 0 0; }
.more-entry-form .primary-button { margin-top: 20px; }
.more-entry-form .reward-note { margin-top: 1px; background: var(--white); }
.input-with-icon select { min-width: 0; height: 54px; flex: 1; border: 0; outline: 0; background: transparent; font-size: 17px; }

.entry-when { min-width: 0; margin: 16px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.entry-when legend { padding: 0 5px; font-size: 14px; font-weight: 750; }
.entry-when__controls { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 10px; }
.entry-date-control, .entry-time-control { display: flex; min-width: 0; flex-direction: column; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.entry-date-control > span, .entry-time-control > span:first-child { display: flex; align-items: center; gap: 4px; }
.entry-date-control i, .entry-time-control i { color: var(--ink); font-size: 17px; }
.entry-date-control input, .entry-time-selects select { min-width: 0; height: 46px; border: 1px solid var(--line); border-radius: 13px; outline: 0; background: var(--surface); font-size: 14px; font-weight: 650; }
.entry-date-control input { width: 100%; padding: 0 8px; }
.entry-time-selects { display: flex; min-width: 0; align-items: center; gap: 3px; }
.entry-time-selects select { width: 0; padding: 0 3px; flex: 1; text-align: center; }
.entry-date-control input:focus, .entry-time-selects select:focus { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 12%, transparent); }

.tracker-icon-fieldset { min-width: 0; margin: 17px 0 0; padding: 0; border: 0; }
.tracker-icon-fieldset legend { margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 750; }
.tracker-icon-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tracker-icon-picker button { display: grid; min-height: 54px; cursor: pointer; place-items: center; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-2); color: var(--green); }
.tracker-icon-picker button i { font-size: 25px; }
.tracker-icon-picker button.is-selected { border-color: var(--green); background: var(--sage); box-shadow: inset 0 0 0 1px var(--green); color: var(--green-strong); }
.tracker-create-help { margin: 8px 4px 0; color: var(--muted); font-size: 12px; line-height: 1.4; text-align: center; }
.tracker-record-summary { display: flex; margin: 8px 0 18px; padding: 11px; align-items: center; gap: 10px; border-radius: 16px; background: var(--sage); }
.tracker-record-summary > span { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 13px; background: var(--surface); color: var(--green); }
.tracker-record-summary i { font-size: 25px; }
.tracker-record-summary div { display: flex; min-width: 0; flex-direction: column; }
.tracker-record-summary strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.tracker-record-summary small { color: var(--muted); font-size: 11px; }
[data-tracker-record-kind][hidden] { display: none; }
.tracker-boolean-choice button { min-width: 90px; }

.more-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.more-entry-grid > button { display: flex; min-width: 0; min-height: 90px; padding: 9px 7px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); text-align: center; }
.more-entry-grid > button:active { background: color-mix(in srgb, var(--measurement-tone) 42%, var(--surface-2)); transform: scale(.985); }
.more-entry-grid > button > i { color: var(--more-icon-color, var(--green)); font-size: 30px; }
.more-entry-grid > button > span { font-size: 15px; font-weight: 500; line-height: 1.12; }
.more-entry-grid > button > small { color: var(--muted); font-size: 10px; }

html.has-more-entry-modal { overflow: hidden; }
.more-entry-popup .measurement-popup__icon { color: var(--more-icon-color, var(--green-strong)); }
.more-entry-popup .measurement-popup__header { margin-bottom: 8px; }
.more-entry-popup .field-label { margin-top: 14px; }
.more-entry-popup .more-entry-time { margin-top: 14px; }
.more-entry-popup .primary-button { min-height: 54px; }

@keyframes reveal-more {
    from { opacity: 0; transform: translateY(-7px); }
    to { opacity: 1; transform: translateY(0); }
}

.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-heading h2 { margin-bottom: 10px; }
.section-heading > a, .section-heading > span { color: var(--green); font-size: 14px; }
.compact-heading { margin-top: 26px; }
.compact-heading > span { color: var(--muted); font-size: 12px; }

.day-section { margin-top: 28px !important; }
.timeline-list { border-top: 1px solid var(--line); }
.timeline-item {
    display: flex;
    min-height: 73px;
    padding: 10px 2px;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--line);
}
.entry-icon { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border-radius: 50%; }
.entry-icon i { font-size: 27px; }
.entry-icon--food { background: var(--cream); }
.entry-icon--exposure { background: var(--blue); }
.entry-icon--symptom { background: var(--peach); }
.entry-icon--medicine { background: var(--lilac); }
.entry-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.entry-copy small, .entry-copy span { color: var(--muted); font-size: 13px; }
.entry-copy strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.timeline-chevron, .timeline-item > .ti-chevron-right { color: var(--muted); font-size: 20px; }

.wellness-card {
    display: grid;
    grid-template-columns: 1fr 112px;
    min-height: 150px;
    margin-top: 18px;
    padding: 20px 14px 12px 20px;
    align-items: end;
    border-radius: var(--radius-lg);
    background: var(--sage);
    overflow: hidden;
}
.wellness-card h3 { font-size: 20px; }
.wellness-card p { display: flex; align-items: center; gap: 5px; margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.25; }
.wellness-card img { width: 112px; align-self: end; transform: scale(var(--growth, 1)); transform-origin: bottom center; }
.outline-button { min-height: 38px; padding: 0 17px; cursor: pointer; border: 1.5px solid var(--green); border-radius: 999px; background: transparent; font-weight: 700; }

.progress-card { margin-top: 12px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface-2); }
.progress-card__top { display: flex; justify-content: space-between; margin-bottom: 9px; font-size: 13px; }
.progress-track { height: 8px; overflow: hidden; border-radius: 99px; background: rgba(99, 119, 108, 0.16); }
.progress-track span { display: block; width: 30%; height: 100%; border-radius: inherit; background: #5a9669; transition: width 240ms ease; }

.screen--today .hero-row { padding-bottom: 18px; }
.screen--today .week-strip { margin-bottom: 18px; }
.screen--today .section-block h2 { margin-bottom: 12px; }
.screen--today .day-section { margin-top: 20px !important; }
.screen--today .day-section .timeline-item { min-height: 58px; padding-top: 5px; padding-bottom: 5px; }
.screen--today .day-section .entry-icon { width: 42px; height: 42px; flex-basis: 42px; }
.screen--today .wellness-card { min-height: 94px; margin-top: 8px; padding: 10px 10px 5px 16px; grid-template-columns: 1fr 76px; }
.screen--today .wellness-card img { width: 76px; }
.screen--today .wellness-card p { display: none; }

.bottom-nav {
    position: fixed;
    z-index: 10;
    bottom: 0;
    left: 50%;
    display: grid;
    width: min(100%, 430px);
    min-height: calc(76px + var(--safe-bottom));
    padding: 8px 12px calc(8px + var(--safe-bottom));
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(14px);
    transform: translateX(-50%);
}
.nav-item { display: flex; min-width: 0; height: 54px; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); font-size: 11px; }
.nav-item i { font-size: 23px; }
.nav-item.is-active { color: var(--green); font-weight: 700; }
.nav-add { display: grid; width: 58px; height: 58px; margin: -22px auto 0; place-items: center; border: 5px solid var(--surface); border-radius: 50%; background: var(--green); color: white; box-shadow: 0 6px 14px rgba(28, 88, 70, 0.22); }
.nav-add i { font-size: 30px; }
.nav-add.is-active { background: #34785f; }

.action-list, .settings-list { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.action-list a, .settings-list a, .settings-list button, .settings-list label {
    display: flex;
    width: 100%;
    min-height: 72px;
    padding: 10px 13px;
    cursor: pointer;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    background: transparent;
    text-align: left;
}
.action-list a:last-child, .settings-list > :last-child { border-bottom: 0; }
.action-list a > span:nth-child(2), .settings-list a > span:nth-child(2), .settings-list button > span:nth-child(2), .settings-list label > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.action-list small, .settings-list small { color: var(--muted); font-size: 12px; }
.action-list > a > .ti-chevron-right, .settings-list a > .ti-chevron-right, .settings-list button > .ti-chevron-right { color: var(--muted); }
.list-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 14px; background: var(--surface-2); }
.list-icon i { font-size: 23px; }
.list-icon--cream { background: var(--cream); }
.list-icon--peach { background: var(--peach); }
.list-icon--blue { background: var(--blue); }
.list-icon--sage { background: var(--sage); }
.list-icon--lilac { background: var(--lilac); }

.assistant-note { display: flex; margin: 20px 0; padding: 14px 16px; align-items: center; gap: 12px; border-radius: var(--radius-lg); background: var(--sage); }
.assistant-note img { width: 58px; }
.assistant-note div { display: flex; flex-direction: column; }
.assistant-note span { color: var(--muted); font-size: 13px; }

.page-title-row { display: flex; align-items: flex-start; gap: 9px; padding: 10px 0 24px; }
.page-title-row > div { min-width: 0; flex: 1; }
.page-title-row--with-action > .icon-button { flex: 0 0 46px; margin-top: -1px; }
.page-title-row h1 { margin-bottom: 5px; font-size: 37px; letter-spacing: -1.7px; }
.back-button { display: grid; width: 37px; height: 44px; margin-left: -9px; flex: 0 0 37px; cursor: pointer; place-items: center; background: transparent; font-size: 28px; }

.context-row { display: flex; margin-bottom: 22px; align-items: center; justify-content: space-between; gap: 7px; color: var(--muted); font-size: 13px; }
.context-row span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.context-row i { color: var(--ink); font-size: 20px; }
.context-row--boxed { justify-content: flex-start; gap: 28px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }

.meal-when { min-width: 0; margin: 0 0 22px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); }
.meal-when legend { padding: 0 6px; font-size: 18px; font-weight: 800; }
.meal-when__controls { display: grid; grid-template-columns: minmax(0, 1fr) 142px; align-items: end; gap: 10px; }
.meal-day-choice { display: grid; min-height: 50px; padding: 4px; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: 15px; background: var(--sage); }
.meal-day-choice button { cursor: pointer; border-radius: 12px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 700; }
.meal-day-choice button.is-selected { background: var(--surface); color: var(--green-strong); box-shadow: 0 2px 9px rgba(16, 57, 48, .10); }
.meal-hour-control { display: flex; min-width: 0; flex-direction: column; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.meal-hour-control > span { display: flex; align-items: center; gap: 4px; }
.meal-hour-control i { color: var(--ink); font-size: 17px; }
.meal-time-selects { display: flex; align-items: center; gap: 4px; }
.meal-time-selects select { min-width: 0; height: 50px; padding: 0 5px; flex: 1; border: 1px solid var(--line); border-radius: 14px; outline: 0; background: var(--surface); font-size: 16px; font-weight: 750; text-align: center; }
.meal-time-selects select:focus { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 12%, transparent); }
.meal-when__meta { display: flex; margin-top: 12px; padding-top: 11px; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.meal-when__meta span { display: inline-flex; align-items: center; gap: 5px; }
.meal-when__meta i { color: var(--green); font-size: 18px; }
.meal-when__meta strong { color: var(--ink); }
.meal-review-when { margin: 12px 0 22px; }

.photo-hero { display: flex; width: 100%; min-height: 188px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--radius-xl); background: var(--sage); }
.photo-hero__icon { display: grid; width: 76px; height: 76px; margin-bottom: 10px; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.48); }
.photo-hero__icon i { font-size: 42px; }
.photo-hero strong { font-size: 20px; }
.photo-hero small { color: var(--muted); }

.split-actions { display: grid; margin-top: 10px; grid-template-columns: 1fr 1fr; gap: 10px; }
.soft-action { display: flex; min-height: 94px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: var(--radius-lg); }
.soft-action i { font-size: 31px; }
.soft-action--cream { background: var(--cream); }
.soft-action--blue { background: var(--blue); }
.or-divider { display: flex; margin: 17px 0; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.or-divider::before, .or-divider::after { height: 1px; flex: 1; background: var(--line); content: ""; }

.field-label { display: block; margin: 20px 0 7px; font-weight: 750; }
.field-label span { color: var(--muted); font-size: 12px; font-weight: 500; }
.field-help { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.voice-field { position: relative; }
.voice-field textarea, .standard-textarea, .input-with-icon, .two-fields input, .two-fields select {
    width: 100%;
    border: 1.5px solid #cfd2d5;
    border-radius: var(--radius-md);
    outline: 0;
    background: var(--surface);
}
.voice-field textarea, .standard-textarea { padding: 15px 54px 15px 15px; resize: vertical; line-height: 1.4; }
.standard-textarea { padding-right: 15px; }
.voice-field textarea:focus, .standard-textarea:focus, input:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 14%, transparent); }
.voice-field button { position: absolute; right: 10px; bottom: 10px; display: grid; width: 42px; height: 42px; cursor: pointer; place-items: center; border-radius: 50%; background: var(--surface-2); font-size: 24px; }
.field-section-title { margin: 25px 0 10px; font-size: 23px; }
.meal-recents { margin-top: 28px; padding-top: 4px; }
.recent-list { display: grid; gap: 8px; }
.recent-choice { display: flex; width: 100%; min-height: 70px; padding: 10px 12px; cursor: pointer; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); text-align: left; }
.recent-choice > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.recent-choice > span:nth-child(2) strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-choice > span:nth-child(2) small { color: var(--muted); font-size: 11px; }
.recent-choice > i { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: var(--sage); font-size: 21px; }
.recent-choice.is-added { border-color: color-mix(in srgb, var(--green) 58%, var(--line)); background: var(--sage); }
.recent-choice.is-added > i { background: var(--green); color: white; }
.meal-added { margin: 0 0 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--green) 45%, var(--line)); border-radius: var(--radius-md); background: var(--sage); }
.meal-added[hidden] { display: none; }
.meal-added__title { display: flex; margin-bottom: 8px; align-items: center; gap: 6px; color: var(--green-strong); font-size: 11px; font-weight: 750; }
.meal-added__title i { font-size: 17px; }
.meal-added__items { display: grid; gap: 7px; }
.meal-added__choice { display: flex; min-width: 0; padding: 7px; align-items: center; gap: 10px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 78%, transparent); }
.meal-added__choice strong { overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; }
.meal-added__choice button { display: grid; width: 34px; height: 34px; cursor: pointer; place-items: center; border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 18px; }
.screen--food .meal-added { margin-top: 16px; margin-bottom: 16px; }
.screen--food .meal-added[hidden] + .primary-button { margin-top: 16px; }
.primary-button + .reward-note { margin-top: 1px; background: var(--white); }

.reward-note { display: flex; margin: 24px 0 12px; padding: 12px 14px; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius-md); background: var(--sage); color: var(--muted); font-size: 12px; text-align: center; }
.reward-note i { font-size: 22px; }
.primary-button { display: flex; width: 100%; min-height: 58px; padding: 0 22px; cursor: pointer; align-items: center; justify-content: space-between; gap: 10px; border-radius: 20px; background: var(--green-strong); color: white; font-size: 18px; font-weight: 800; text-align: left; }
.primary-button > span { min-width: 0; }
.primary-button i { margin-left: auto; font-size: 24px; }
.secondary-button { display: flex; min-height: 44px; margin: 12px auto; padding: 0 18px; cursor: pointer; align-items: center; justify-content: center; gap: 7px; border-radius: 999px; background: var(--sage); color: var(--green-strong); }
.secondary-button--full { width: 100%; min-height: 52px; border-radius: var(--radius-md); }

.summary-card { display: flex; padding: 14px; align-items: center; gap: 12px; border-radius: var(--radius-lg); }
.summary-card--food { background: var(--cream); }
.summary-card > div { display: flex; flex: 1; flex-direction: column; }
.summary-card > div span { color: var(--muted); font-size: 12px; }
.confidence, .demo-badge { padding: 5px 8px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 10px; font-style: normal; }

.food-items { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.food-item-block { border-bottom: 1px solid var(--line); background: var(--white); }
.food-item-block:last-child { border-bottom: 0; }
.food-item { display: grid; min-height: 72px; padding: 9px 8px 9px 12px; grid-template-columns: 42px minmax(0, 1fr) 74px 34px; align-items: center; gap: 9px; background: var(--white); transition: background 160ms ease; }
.food-item-block.is-open .food-item { background: color-mix(in srgb, var(--sage) 46%, var(--white)); }
.food-item__copy { display: flex; min-width: 0; cursor: pointer; flex-direction: column; align-items: flex-start; background: transparent; text-align: left; }
.food-item__copy strong { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.food-item small { color: var(--muted); }
.food-item label { display: flex; height: 38px; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.food-item input { width: 48px; border: 0; outline: 0; background: transparent; text-align: right; }
.food-item label span { color: var(--muted); font-size: 12px; }
.food-item button { cursor: pointer; background: transparent; color: var(--muted); font-size: 19px; }
.food-item .food-item__copy { color: var(--ink); font-size: 16px; }
.food-item .food-item__copy small { color: var(--muted); font-size: 12px; line-height: 1.25; }
.food-item__actions { display: flex; align-items: center; }
.food-item__actions button { display: grid; width: 32px; height: 36px; place-items: center; border-radius: 10px; }
.food-editor { padding: 13px 12px 15px 32px; border-top: 1px solid color-mix(in srgb, var(--green) 18%, var(--line)); background: color-mix(in srgb, var(--sage) 34%, var(--surface)); }
.food-editor[hidden] { display: none; }
.food-editor__heading { display: flex; margin-bottom: 10px; align-items: center; justify-content: space-between; }
.food-editor__heading > span { display: flex; min-width: 0; flex-direction: column; }
.food-editor__heading strong { font-size: 14px; }
.food-editor__heading small { color: var(--muted); font-size: 11px; }
.food-editor__heading button { display: grid; width: 34px; height: 34px; cursor: pointer; place-items: center; border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 18px; }
.food-editor__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.food-nutrient-field { display: flex; min-width: 0; min-height: 58px; padding: 7px 9px; flex-direction: column; justify-content: center; border-radius: 13px; background: var(--surface); }
.food-nutrient-field > span { color: var(--muted); font-size: 10px; }
.food-nutrient-field > label { display: flex; margin-top: 2px; align-items: baseline; gap: 4px; }
.food-nutrient-field input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 17px; font-weight: 750; }
.food-nutrient-field input:focus { border-color: transparent; outline: 0; box-shadow: none; }
.food-nutrient-field small { color: var(--muted); font-size: 10px; }
.food-nutrient-field--calories { box-shadow: inset 3px 0 0 #9bc29b; }
.food-nutrient-field--protein { box-shadow: inset 3px 0 0 #e9a18f; }
.food-nutrient-field--carbs { box-shadow: inset 3px 0 0 #e9c779; }
.food-nutrient-field--fats { box-shadow: inset 3px 0 0 #8ec1df; }
.food-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; color: var(--green-strong); font-size: 23px; }
.food-icon--cream { background: var(--cream); }
.food-icon--sage { background: var(--sage); }
.food-icon--blue { background: var(--blue); }
.food-icon--peach { background: var(--peach); }
.food-add-panel { margin-top: 12px; }
.food-search { display: flex; min-height: 52px; padding: 0 13px; align-items: center; gap: 9px; border: 1.5px solid var(--line); border-radius: 15px; background: var(--surface); }
.food-search:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 12%, transparent); }
.food-search i { color: var(--muted); font-size: 21px; }
.food-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 15px; }
.food-suggestions { display: grid; max-height: 224px; margin-top: 8px; grid-template-columns: 1fr 1fr; gap: 7px; overflow-y: auto; }
.food-suggestions[hidden], .food-search-empty[hidden], .food-custom[hidden] { display: none; }
.food-suggestions button { display: flex; min-width: 0; min-height: 50px; padding: 8px 9px; cursor: pointer; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); text-align: left; }
.food-suggestions button[hidden] { display: none; }
.food-suggestions button > i:first-child { width: 23px; flex: 0 0 23px; color: var(--green); font-size: 21px; text-align: center; }
.food-suggestions button > span { overflow: hidden; flex: 1; font-size: 12px; font-weight: 700; text-overflow: ellipsis; }
.food-suggestions button > i:last-child { color: var(--green); font-size: 18px; }
.food-search-empty { margin: 10px 2px 5px; color: var(--muted); font-size: 12px; }
.food-custom { display: flex; width: 100%; min-height: 46px; margin-top: 8px; padding: 0 12px; cursor: pointer; align-items: center; justify-content: center; gap: 4px; border-radius: 14px; background: var(--sage); color: var(--green-strong); font-size: 12px; font-weight: 750; }

.nutrition-card { margin-top: 22px; padding: 18px 14px 15px; border-radius: var(--radius-lg); background: var(--sage); }
.nutrition-total { display: flex; flex-direction: column; align-items: center; text-align: center; }
.nutrition-total > span { color: var(--muted); font-size: 15px; }
.nutrition-total > strong { margin-top: 2px; color: var(--ink); font-size: 31px; line-height: 1.08; }
.nutrition-grid { display: grid; margin-top: 17px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.nutrition-pill { display: flex; min-width: 0; min-height: 72px; padding: 9px 8px; align-items: center; gap: 7px; border-radius: 18px; }
.nutrition-pill--protein { background: var(--nutrition-protein); }
.nutrition-pill--carbs { background: var(--nutrition-carbs); }
.nutrition-pill--fats { background: var(--nutrition-fats); }
.nutrition-icon { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 50%; color: var(--green-strong); font-size: 20px; }
.nutrition-pill--protein .nutrition-icon { background: var(--nutrition-protein-icon); }
.nutrition-pill--carbs .nutrition-icon { background: var(--nutrition-carbs-icon); }
.nutrition-pill--fats .nutrition-icon { background: var(--nutrition-fats-icon); }
.nutrition-copy { display: flex; min-width: 0; flex-direction: column; color: var(--muted); }
.nutrition-copy > strong { color: var(--ink); font-size: 16px; line-height: 1.05; white-space: nowrap; }
.nutrition-copy > small { margin-top: 3px; font-size: 10px; line-height: 1.1; }
.info-note { display: flex; margin: 16px 0; padding: 13px 14px; align-items: flex-start; gap: 9px; border-radius: var(--radius-md); background: var(--blue); color: var(--muted); }
.info-note i { color: var(--green); font-size: 22px; }
.info-note p { margin: 0; font-size: 12px; }

.form-heading { margin: 25px 0 13px; font-size: 28px; }
.selected-symptom { display: flex; width: 100%; min-height: 78px; padding: 10px 13px; cursor: pointer; align-items: center; gap: 14px; border-radius: var(--radius-lg); background: var(--peach); }
.selected-symptom strong { flex: 1; text-align: left; font-size: 19px; }
.selected-symptom > i { color: var(--muted); font-size: 24px; }
.selected-symptom [data-symptom-chevron] { transition: transform 180ms ease; }
.selected-symptom.is-open [data-symptom-chevron] { transform: rotate(180deg); }
.symptom-picker { margin-top: 10px; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); }
.symptom-picker[hidden] { display: none; }
.symptom-picker__heading { display: flex; margin-bottom: 10px; align-items: center; justify-content: space-between; }
.symptom-picker__heading strong { font-size: 18px; }
.symptom-picker__heading button { display: grid; width: 36px; height: 36px; cursor: pointer; place-items: center; border-radius: 50%; background: var(--surface); font-size: 20px; }
.symptom-search { display: flex; min-height: 50px; padding: 0 12px; align-items: center; gap: 8px; border: 1.5px solid var(--line); border-radius: 15px; background: var(--surface); }
.symptom-search:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 12%, transparent); }
.symptom-search i { color: var(--muted); font-size: 21px; }
.symptom-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; }
.symptom-options { display: grid; max-height: 290px; margin-top: 10px; grid-template-columns: 1fr 1fr; gap: 7px; overflow-y: auto; }
.symptom-options button { display: flex; min-width: 0; min-height: 54px; padding: 8px 9px; cursor: pointer; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: left; }
.symptom-options button i { width: 25px; flex: 0 0 25px; color: #9d5365; font-size: 22px; text-align: center; }
.symptom-options button span { overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; }
.symptom-options button.is-selected { border-color: #9d5365; background: var(--peach); box-shadow: inset 0 0 0 1px #9d5365; }
.symptom-empty { margin: 12px 2px 5px; color: var(--muted); font-size: 12px; }
.symptom-custom { display: flex; width: 100%; min-height: 46px; margin-top: 9px; padding: 0 12px; cursor: pointer; align-items: center; justify-content: center; gap: 4px; border-radius: 14px; background: var(--sage); color: var(--green-strong); font-size: 12px; font-weight: 750; }
.symptom-custom[hidden], .symptom-empty[hidden] { display: none; }
.severity-scale { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.severity-scale button { --scale-bg: var(--sage); --scale-ink: var(--ink); aspect-ratio: 1 / 1; cursor: pointer; border-radius: 16px; background: var(--scale-bg); color: var(--scale-ink); font-size: 19px; font-weight: 700; transition: transform 150ms ease, box-shadow 150ms ease; }
.severity-scale button.is-selected { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 75%, transparent), 0 4px 10px rgba(45, 31, 36, .12); transform: translateY(-2px); }
.severity-scale--negative button[data-choice="0"] { --scale-bg: #eceeeb; --scale-ink: #66716d; }
.severity-scale--negative button[data-choice="1"] { --scale-bg: #f6e1d7; --scale-ink: #714d47; }
.severity-scale--negative button[data-choice="2"] { --scale-bg: #efc3b0; --scale-ink: #67433e; }
.severity-scale--negative button[data-choice="3"] { --scale-bg: #d98b7f; --scale-ink: #fff; }
.severity-scale--negative button[data-choice="4"] { --scale-bg: #ad5a6a; --scale-ink: #fff; }
.severity-scale--negative button[data-choice="5"] { --scale-bg: #743a58; --scale-ink: #fff; }
.severity-scale--positive button[data-choice="0"] { --scale-bg: #eceeeb; --scale-ink: #66716d; }
.severity-scale--positive button[data-choice="1"] { --scale-bg: #efc1b6; --scale-ink: #70433e; }
.severity-scale--positive button[data-choice="2"] { --scale-bg: #f1d09d; --scale-ink: #655029; }
.severity-scale--positive button[data-choice="3"] { --scale-bg: #dce5b7; --scale-ink: #425335; }
.severity-scale--positive button[data-choice="4"] { --scale-bg: #a8cf9f; --scale-ink: #244c35; }
.severity-scale--positive button[data-choice="5"] { --scale-bg: #4f8b64; --scale-ink: #fff; }
.severity-labels { display: flex; margin-top: 7px; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; }
.severity-labels strong { color: var(--green); font-size: 11px; }

.detail-list { margin-top: 22px; border-top: 1px solid var(--line); }
.detail-list > button, .detail-list > label, .detail-list > .symptom-time-row, .duration-row { display: flex; width: 100%; min-height: 67px; padding: 10px 4px; cursor: pointer; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.detail-list > button > i:first-child, .detail-list > label > i:first-child, .detail-list > .symptom-time-row > i:first-child, .duration-row > i { width: 34px; flex: 0 0 34px; color: var(--ink); font-size: 26px; }
.detail-list > button > span, .detail-list > label > span:nth-child(2), .symptom-time-row > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.detail-list > button > strong { margin-left: auto; }
.detail-list small { color: var(--muted); font-size: 11px; }
.detail-list .ti-chevron-right { color: var(--muted); font-size: 23px; }
.symptom-time-selects { display: flex; margin-left: auto; align-items: center; gap: 4px; color: var(--muted); font-weight: 750; }
.symptom-time-selects select { width: 58px; min-height: 42px; padding: 0 5px; border: 1px solid var(--line); border-radius: 12px; outline: 0; background: var(--surface-2); color: var(--ink); font-size: 15px; font-weight: 750; text-align: center; }
.symptom-time-selects select:focus { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 12%, transparent); }
.toggle-row input, .settings-list label input { position: absolute; opacity: 0; pointer-events: none; }
.switch { position: relative; width: 48px; height: 28px; flex: 0 0 48px !important; border-radius: 999px; background: #c9ceca; transition: background 180ms ease; }
.switch::after { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(0,0,0,.2); content: ""; transition: transform 180ms ease; }
input:checked + .switch { background: var(--green); }
input:checked + .switch::after { transform: translateX(20px); }
.extra-details { margin-top: 10px; }
.symptom-photo-button { display: flex; width: 100%; min-height: 66px; padding: 10px 13px; cursor: pointer; align-items: center; gap: 11px; border: 1.5px dashed color-mix(in srgb, var(--green) 55%, var(--line)); border-radius: var(--radius-md); background: var(--sage); text-align: left; }
.symptom-photo-button > i:first-child { font-size: 27px; }
.symptom-photo-button > span { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.symptom-photo-button small { color: var(--muted); font-size: 11px; }
.symptom-photo-button > i:last-child { color: var(--green); font-size: 23px; }
.symptom-photo-preview { overflow: hidden; margin: 10px 0 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.symptom-photo-preview[hidden] { display: none; }
.symptom-photo-preview img { width: 100%; max-height: 220px; object-fit: cover; background: var(--surface-2); }
.symptom-photo-preview figcaption { display: flex; min-height: 48px; padding: 7px 10px; align-items: center; gap: 8px; }
.symptom-photo-preview figcaption > span { overflow: hidden; flex: 1; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.symptom-photo-preview figcaption button { display: inline-flex; min-height: 34px; padding: 0 9px; cursor: pointer; align-items: center; gap: 5px; border-radius: 10px; background: var(--peach); color: var(--danger); font-size: 11px; font-weight: 750; }

.exposure-title { display: flex; margin: 2px 0 15px; align-items: center; gap: 13px; }
.exposure-title > span { display: grid; width: 66px; height: 66px; flex: 0 0 66px; place-items: center; border-radius: 50%; background: var(--blue); }
.exposure-title i { font-size: 38px; }
.exposure-title h2 { margin: 0; font-size: 24px; }
.page-title-row--exposure { padding-bottom: 18px; }
.selected-exposures { padding: 12px; border: 1px solid color-mix(in srgb, var(--green) 35%, var(--line)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--sage) 56%, var(--surface)); }
.selected-exposures__heading { display: flex; margin-bottom: 9px; align-items: center; justify-content: space-between; gap: 10px; color: var(--green-strong); font-size: 11px; font-weight: 750; }
.selected-exposures__heading span { display: inline-flex; align-items: center; gap: 5px; }
.selected-exposures__heading i { font-size: 15px; }
.selected-exposures__heading strong { color: var(--muted); font-size: 11px; }
.selected-exposures__list { display: flex; min-height: 40px; flex-wrap: wrap; gap: 7px; }
.selected-exposures__list button { display: inline-flex; min-height: 40px; padding: 0 9px; cursor: pointer; align-items: center; gap: 6px; border-radius: 13px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 700; box-shadow: 0 2px 8px rgba(16, 57, 48, .06); }
.selected-exposures__list button i:first-child { color: var(--green); font-size: 20px; }
.selected-exposures__list button i:last-child { color: var(--muted); font-size: 16px; }
.selected-exposures__empty { display: flex; min-height: 40px; align-items: center; color: var(--muted); font-size: 12px; }
.exposure-add-button { display: flex; width: 100%; min-height: 50px; margin-top: 9px; padding: 0 13px; cursor: pointer; align-items: center; gap: 8px; border-radius: 15px; background: var(--sage); color: var(--green-strong); font-weight: 750; }
.exposure-add-button > i:first-child { font-size: 21px; }
.exposure-add-button > span { flex: 1; text-align: left; }
.exposure-add-button > i:last-child { font-size: 20px; transition: transform 160ms ease; }
.exposure-add-button[aria-expanded="true"] > i:last-child { transform: rotate(180deg); }
.exposure-picker-panel, .location-picker-panel { margin-top: 9px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); animation: reveal-more 180ms ease-out both; }
.picker-panel-heading { display: flex; margin-bottom: 10px; align-items: center; justify-content: space-between; gap: 10px; }
.picker-panel-heading > div { display: flex; min-width: 0; flex-direction: column; }
.picker-panel-heading strong { font-size: 16px; }
.picker-panel-heading small { color: var(--muted); font-size: 11px; }
.picker-panel-heading > button { display: grid; width: 34px; height: 34px; cursor: pointer; place-items: center; border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 19px; }
.picker-search { display: flex; min-height: 46px; padding: 0 11px; align-items: center; gap: 8px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); }
.picker-search:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 12%, transparent); }
.picker-search > i { color: var(--muted); font-size: 20px; }
.picker-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 14px; box-shadow: none; }
.picker-search input:focus { border: 0; box-shadow: none; }
.exposure-options { display: grid; max-height: 286px; margin-top: 10px; padding-right: 2px; overflow-y: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; scrollbar-width: thin; }
.exposure-options button { display: grid; min-width: 0; min-height: 53px; padding: 7px 8px; cursor: pointer; grid-template-columns: 28px minmax(0, 1fr) 18px; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: left; }
.exposure-options button[hidden] { display: none; }
.exposure-options button > i:first-child { color: var(--green); font-size: 22px; }
.exposure-options button span { overflow: hidden; font-size: 12px; font-weight: 700; line-height: 1.15; text-overflow: ellipsis; }
.exposure-options button > i:last-child { visibility: hidden; color: var(--green-strong); font-size: 17px; }
.exposure-options button.is-selected { border-color: color-mix(in srgb, var(--green) 55%, var(--line)); background: var(--sage); }
.exposure-options button.is-selected > i:last-child { visibility: visible; }
.picker-empty { margin: 10px 2px 0; color: var(--muted); font-size: 11px; }
.picker-custom-action { display: flex; width: 100%; min-height: 46px; margin-top: 9px; padding: 0 12px; cursor: pointer; align-items: center; justify-content: center; gap: 5px; border-radius: 13px; background: var(--sage); color: var(--green-strong); font-size: 13px; font-weight: 750; }
.picker-custom-action[hidden] { display: none; }
.picker-custom-action i { font-size: 18px; }
.exposure-event-help { display: flex; margin: 11px 2px 0; align-items: flex-start; gap: 6px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.exposure-event-help i { flex: 0 0 auto; color: var(--green); font-size: 16px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-row button { min-height: 40px; padding: 0 16px; cursor: pointer; border: 1px solid #cfd2d5; border-radius: 999px; background: transparent; }
.chip-row button.is-selected { border-color: transparent; background: var(--sage-strong); font-weight: 700; }
.chip-row--compact { margin-top: 7px; gap: 5px; }
.chip-row--compact button { min-height: 34px; padding: 0 12px; font-size: 12px; }
.duration-row { align-items: flex-start; }
.duration-row > div { flex: 1; }
.custom-duration { display: grid; margin-top: 9px; grid-template-columns: minmax(0, 1fr) 112px; gap: 8px; }
.custom-duration[hidden] { display: none; }
.custom-duration label { display: flex; min-width: 0; min-height: 47px; padding: 5px 10px; flex-direction: column; justify-content: center; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.custom-duration label span { color: var(--muted); font-size: 9px; }
.custom-duration input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-weight: 750; box-shadow: none; }
.custom-duration input:focus { border: 0; box-shadow: none; }
.custom-duration select { min-width: 0; padding: 0 9px; border: 1px solid var(--line); border-radius: 13px; outline: 0; background: var(--surface); font-size: 12px; }
.detail-list--form > [data-location-toggle] .ti-chevron-down { color: var(--muted); font-size: 22px; transition: transform 160ms ease; }
.detail-list--form > [data-location-toggle][aria-expanded="true"] .ti-chevron-down { transform: rotate(180deg); }
.detail-list--form > .location-picker-panel { margin: 0; border-width: 0 0 1px; border-radius: 0; }
.location-options { display: grid; margin-top: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.location-options button { display: grid; min-width: 0; min-height: 44px; padding: 0 9px; cursor: pointer; grid-template-columns: 20px minmax(0, 1fr) 17px; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); font-size: 12px; font-weight: 700; text-align: left; }
.location-options button[hidden] { display: none; }
.location-options button > i:first-child { color: var(--green); font-size: 17px; }
.location-options button > i:last-child { visibility: hidden; color: var(--green); }
.location-options button.is-selected { border-color: color-mix(in srgb, var(--green) 55%, var(--line)); background: var(--sage); }
.location-options button.is-selected > i:last-child { visibility: visible; }
.exposure-photo-preview { margin-top: 10px; }
.detail-list--form { margin-top: 23px; }

.input-with-icon { display: flex; min-height: 56px; padding: 0 14px; align-items: center; gap: 10px; }
.input-with-icon i { font-size: 24px; }
.input-with-icon input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 17px; }
.two-fields { display: grid; margin-top: 16px; grid-template-columns: 1fr 1fr; gap: 10px; }
.two-fields label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; }
.two-fields input, .two-fields select { height: 52px; padding: 0 13px; }

.measurement-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.measurement-grid button { display: flex; min-height: 94px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); }
.measurement-grid button i { font-size: 30px; }
.measurement-grid button.is-selected { border-color: var(--green); background: var(--sage); color: var(--green-strong); font-weight: 800; }
.measurement-grid button span { max-width: 100%; line-height: 1.12; }
.measurement-grid button small { color: var(--muted); font-size: 10px; font-weight: 500; }
.measurement-grid--extended button { min-height: 90px; padding: 9px 7px; text-align: center; }
.measurement-value { margin: 22px 0; text-align: center; }
.measurement-value > label { display: block; margin-bottom: 7px; color: var(--muted); }
.measurement-value > div { display: flex; justify-content: center; align-items: baseline; gap: 8px; }
.measurement-value input { width: 150px; border: 0; border-bottom: 2px solid var(--green); outline: 0; background: transparent; font-size: 48px; font-weight: 800; text-align: center; }
.measurement-value span { color: var(--muted); font-size: 21px; }
.page-title-row--measurement { padding-bottom: 14px; }
.measurement-variant-nav { display: grid; margin: 0 0 18px; padding: 4px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; border-radius: 15px; background: var(--sage); }
.measurement-variant-nav a { display: flex; min-width: 0; min-height: 38px; padding: 0 5px; align-items: center; justify-content: center; border-radius: 12px; color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
.measurement-variant-nav a.is-selected { background: var(--surface); color: var(--green-strong); box-shadow: 0 2px 9px rgba(16, 57, 48, .10); }

.measurement-swipe { display: flex; margin: 0 -20px; padding: 3px 20px 10px; overflow-x: auto; gap: 10px; cursor: grab; scroll-padding-left: 20px; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-y; user-select: none; }
.measurement-swipe.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.measurement-swipe::-webkit-scrollbar { display: none; }
.measurement-swipe button { display: flex; width: 126px; min-width: 126px; min-height: 108px; padding: 11px 8px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); scroll-snap-align: center; text-align: center; }
.measurement-swipe button i { color: var(--measurement-icon-color, var(--green-strong)); font-size: 31px; }
.measurement-swipe button span { font-size: 15px; font-weight: 500; line-height: 1.12; }
.measurement-swipe button small { color: var(--muted); font-size: 10px; }
.measurement-swipe button.is-selected { border-color: var(--green); background: var(--measurement-tone, var(--sage)); color: var(--green-strong); }
.swipe-hint { display: flex; margin: 0 0 10px; align-items: center; justify-content: center; gap: 5px; color: var(--muted); font-size: 11px; }
.swipe-hint i { font-size: 16px; }

.measurement-panel-label { display: block; margin-bottom: 12px; color: var(--muted); text-align: center; }
.pressure-panel { margin: 22px 0; }
.pressure-fields { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); align-items: end; gap: 5px; }
.pressure-fields label { display: flex; min-width: 0; flex-direction: column; align-items: center; }
.pressure-fields label > span { margin-bottom: 3px; color: var(--muted); font-size: 11px; }
.pressure-fields input { width: 100%; min-width: 0; padding: 3px 1px 5px; border: 0; border-bottom: 2px solid var(--green); outline: 0; background: transparent; font-size: 38px; font-weight: 800; text-align: center; }
.pressure-fields small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.pressure-divider { padding-bottom: 25px; color: var(--muted); font-size: 28px; text-align: center; }

.measurement-list { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.measurement-list > button { display: flex; width: 100%; min-height: 73px; padding: 9px 12px; cursor: pointer; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.measurement-list > button:last-child { border-bottom: 0; }
.measurement-list > button:active { background: var(--surface-2); }
.measurement-list__icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 14px; background: var(--sage); color: var(--green-strong); }
.measurement-list > button:nth-child(4n + 2) .measurement-list__icon { background: var(--cream); }
.measurement-list > button:nth-child(4n + 3) .measurement-list__icon { background: var(--blue); }
.measurement-list > button:nth-child(4n + 4) .measurement-list__icon { background: var(--peach); }
.measurement-list__icon i { font-size: 24px; }
.measurement-list__copy { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.measurement-list__copy strong { font-size: 15px; line-height: 1.18; }
.measurement-list__copy small { color: var(--muted); font-size: 11px; }
.measurement-list__action { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 13px; background: var(--sage); color: var(--green-strong); }
.measurement-list__action i { font-size: 22px; }
.measurement-list > button.is-recorded { background: color-mix(in srgb, var(--sage) 48%, var(--white)); }
.measurement-list > button.is-recorded .measurement-list__action { background: var(--green); color: white; }

.measurement-tone--sage { --measurement-tone: var(--sage); --measurement-tone-strong: var(--sage-strong); --measurement-icon-color: #4f855d; }
.measurement-tone--cream { --measurement-tone: var(--cream); --measurement-tone-strong: var(--nutrition-carbs-icon); --measurement-icon-color: #aa7219; }
.measurement-tone--blue { --measurement-tone: var(--blue); --measurement-tone-strong: var(--nutrition-fats-icon); --measurement-icon-color: #347b98; }
.measurement-tone--peach { --measurement-tone: var(--peach); --measurement-tone-strong: var(--nutrition-protein-icon); --measurement-icon-color: #b35c58; }
.measurement-colored-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.measurement-colored-grid > button { position: relative; display: flex; min-width: 0; min-height: 90px; padding: 9px 7px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); color: var(--ink); text-align: center; transition: border-color 160ms ease, background 160ms ease, transform 120ms ease; }
.measurement-colored-grid > button:active { background: color-mix(in srgb, var(--measurement-tone) 42%, var(--surface-2)); transform: scale(.985); }
.measurement-colored-grid > button:focus-visible { outline: 3px solid color-mix(in srgb, var(--green) 26%, transparent); outline-offset: 2px; }
.measurement-colored-grid > button > i:first-child { color: var(--measurement-icon-color, var(--green-strong)); font-size: 30px; }
.measurement-colored-grid__label { max-width: 100%; font-size: 15px; font-weight: 500; line-height: 1.12; }
.measurement-colored-grid small { max-width: 100%; color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.15; }
.measurement-colored-grid__status-icon { position: absolute; top: 8px; right: 8px; display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: var(--green); color: white; opacity: 0; transform: scale(.75); transition: opacity 160ms ease, transform 160ms ease; }
.measurement-colored-grid__status-icon i { font-size: 15px; }
.measurement-colored-grid > button.is-recorded { border-color: var(--green); background: color-mix(in srgb, var(--measurement-tone) 38%, var(--surface-2)); font-weight: 800; }
.measurement-colored-grid > button.is-recorded .measurement-colored-grid__status-icon { opacity: 1; transform: scale(1); }

html.has-measurement-modal { overflow: hidden; }
.measurement-modal { position: fixed; z-index: 60; inset: 0; display: flex; padding: 18px; align-items: center; justify-content: center; }
.measurement-modal[hidden] { display: none; }
.measurement-modal__backdrop { position: absolute; inset: 0; cursor: pointer; background: rgba(7, 27, 24, .58); backdrop-filter: blur(3px); }
.measurement-popup { position: relative; width: min(100%, 394px); max-height: calc(100dvh - 36px); padding: 20px; overflow-y: auto; border: 1px solid color-mix(in srgb, var(--green) 25%, var(--line)); border-radius: 28px; background: var(--surface); box-shadow: 0 24px 70px rgba(4, 28, 23, .28); animation: measurement-popup-in 180ms ease-out both; }
.measurement-popup__close { position: absolute; z-index: 1; top: 12px; right: 12px; display: grid; width: 38px; height: 38px; cursor: pointer; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--surface) 75%, transparent); color: var(--muted); font-size: 22px; }
.measurement-popup__header { display: flex; margin: -20px -20px 13px; padding: 24px 50px 18px 20px; align-items: center; gap: 12px; border-radius: 27px 27px 0 0; background: var(--measurement-tone, var(--sage)); }
.measurement-popup__icon { display: grid; width: 54px; height: 54px; flex: 0 0 54px; place-items: center; border-radius: 18px; background: var(--measurement-tone-strong, var(--sage-strong)); color: var(--green-strong); }
.measurement-popup__icon i { font-size: 31px; }
.measurement-popup__header h2 { margin: 0 0 2px; font-size: 22px; letter-spacing: -.5px; }
.measurement-popup__header p { margin: 0; color: var(--muted); font-size: 12px; }
.measurement-value--popup { margin: 13px 0 17px; }
.measurement-value--popup input { font-size: 43px; }
.pressure-panel--popup { margin: 14px 0 18px; }
.stress-panel--popup { margin-bottom: 18px; }
.stress-panel--popup .form-heading { margin-top: 15px; font-size: 22px; }
.popup-note { display: flex; margin: 8px 0 14px; flex-direction: column; gap: 6px; font-weight: 400; }
.popup-note > span small { color: var(--muted); font-size: 11px; font-weight: 400; }
.popup-note textarea { width: 100%; min-height: 66px; padding: 11px 12px; resize: vertical; border: 1px solid var(--line); border-radius: 14px; outline: 0; background: var(--surface-2); font-size: 14px; font-weight: 400; }
.popup-note textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 12%, transparent); }
.context-row--popup { margin-bottom: 14px; padding: 11px 13px; }
.measurement-popup .primary-button { min-height: 54px; }

@keyframes measurement-popup-in {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.filter-row { margin: -10px 0 24px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.journal-day { display: grid; grid-template-columns: 48px 1fr; gap: 12px; }
.journal-date { display: flex; padding-top: 8px; flex-direction: column; align-items: center; }
.journal-date span { color: var(--muted); font-size: 10px; font-weight: 800; }
.journal-date strong { font-size: 30px; line-height: 1; }
.journal-date small { color: var(--muted); font-size: 9px; }
.timeline-list--journal { border-top: 0; }

.report-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.report-overview > span { display: flex; min-height: 108px; padding: 12px 8px; flex-direction: column; justify-content: space-between; border-radius: var(--radius-md); background: var(--sage); }
.report-overview > span:nth-child(2) { background: var(--cream); }
.report-overview > span:nth-child(3) { background: var(--peach); }
.report-overview small, .report-overview em { color: var(--muted); font-size: 10px; font-style: normal; }
.report-overview strong { font-size: 31px; }
.data-quality { margin: 14px 0 25px; padding: 16px; border-radius: var(--radius-lg); background: var(--surface-2); }
.data-quality > div:first-child { display: flex; margin-bottom: 10px; justify-content: space-between; font-size: 13px; }
.data-quality p { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.demo-badge { background: var(--lilac); color: var(--muted) !important; white-space: nowrap; }
.insight-card { display: flex; margin-bottom: 10px; padding: 15px; align-items: flex-start; gap: 12px; border-radius: var(--radius-lg); background: var(--peach); }
.insight-card--empty { background: var(--blue); }
.insight-card__icon { display: grid; width: 47px; height: 47px; flex: 0 0 47px; place-items: center; border-radius: 15px; background: rgba(255,255,255,.45); font-size: 26px; }
.insight-card h3 { margin: 6px 0 4px; font-size: 19px; }
.insight-card p { margin-bottom: 8px; font-size: 13px; }
.insight-card small { color: var(--muted); font-size: 11px; }
.evidence { display: inline-block; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.evidence--low { background: var(--cream); color: #76551b; }
.report-button { display: flex; width: 100%; min-height: 76px; margin-top: 18px; padding: 12px 14px; cursor: pointer; align-items: center; gap: 12px; border-radius: var(--radius-lg); background: var(--green); color: white; text-align: left; }
.report-button > i:first-child { font-size: 29px; }
.report-button span { display: flex; flex: 1; flex-direction: column; }
.report-button small { color: rgba(255,255,255,.72); font-size: 11px; }

.profile-card { display: flex; min-height: 76px; padding: 12px; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.avatar { display: grid; width: 50px; height: 50px; flex: 0 0 50px; place-items: center; border-radius: 50%; background: var(--peach); font-size: 20px; font-weight: 800; }
.profile-card > div:nth-child(2) { display: flex; flex: 1; flex-direction: column; }
.profile-card span { color: var(--muted); font-size: 12px; }
.profile-card button { cursor: pointer; background: transparent; font-size: 22px; }
.growth-card { display: grid; min-height: 142px; margin: 15px 0 25px; padding: 13px 16px; grid-template-columns: 100px 1fr; align-items: center; gap: 10px; border-radius: var(--radius-lg); background: var(--sage); }
.growth-card img { width: 96px; transform: scale(var(--growth, 1)); transform-origin: bottom center; }
.growth-card small, .growth-card p { color: var(--muted); font-size: 11px; }
.growth-card h2 { margin: 2px 0 9px; font-size: 19px; }
.growth-card p { margin: 7px 0 0; }
.settings-section { margin-top: 24px; }
.settings-section > h2 { margin-bottom: 9px; font-size: 20px; }
.settings-list label { position: relative; }
.page-title-row--entry-order { padding-bottom: 16px; }
.page-title-row--entry-order h1 { font-size: 35px; }
.entry-order-note { display: flex; margin-bottom: 16px; padding: 13px 14px; align-items: center; gap: 11px; border-radius: var(--radius-md); background: var(--sage); }
.entry-order-note > span { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 13px; background: var(--surface); color: #4f855d; }
.entry-order-note > span i { font-size: 22px; }
.entry-order-note div { display: flex; min-width: 0; flex-direction: column; }
.entry-order-note strong { font-size: 14px; }
.entry-order-note p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.entry-order-list { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.entry-order-item { display: flex; min-height: 76px; padding: 9px 7px 9px 11px; align-items: center; gap: 9px; border-bottom: 1px solid var(--line); background: var(--white); transition: background 150ms ease, opacity 150ms ease, box-shadow 150ms ease; }
.entry-order-item:last-child { border-bottom: 0; }
.entry-order-item.is-priority { background: color-mix(in srgb, var(--sage) 70%, var(--white)); }
.entry-order-item.is-dragging { z-index: 2; opacity: .76; box-shadow: 0 8px 22px rgba(16, 57, 48, .14); }
.entry-order-item__icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 14px; background: var(--measurement-tone, var(--sage)); color: var(--more-icon-color, var(--green-strong)); }
.entry-order-item__icon i { font-size: 24px; }
.entry-order-item__copy { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.entry-order-item__copy strong { overflow: hidden; font-size: 15px; line-height: 1.18; text-overflow: ellipsis; white-space: nowrap; }
.entry-order-item__copy small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.entry-order-item__copy b { color: var(--green); font-weight: 750; }
.entry-order-item__rank { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 800; }
.entry-order-item.is-priority .entry-order-item__rank { background: var(--green); color: white; }
.entry-order-item__moves { display: grid; flex: 0 0 25px; grid-template-rows: repeat(2, 23px); }
.entry-order-item__moves button { display: grid; width: 25px; height: 23px; cursor: pointer; place-items: center; border-radius: 7px; background: transparent; color: var(--muted); }
.entry-order-item__moves button:active { background: var(--surface-2); color: var(--green); }
.entry-order-item__moves button:disabled { cursor: default; opacity: .18; }
.entry-order-item__handle { display: grid; width: 28px; height: 46px; flex: 0 0 28px; cursor: grab; place-items: center; border-radius: 10px; background: transparent; color: var(--muted); touch-action: none; }
.entry-order-item__handle:active { cursor: grabbing; background: var(--surface-2); color: var(--green); }
.entry-order-item__handle i { font-size: 22px; }
.entry-order-footnote { display: flex; margin: 13px 4px 0; align-items: flex-start; gap: 6px; color: var(--muted); font-size: 11px; }
.entry-order-footnote i { flex: 0 0 auto; color: var(--green); font-size: 16px; }
.danger-row { color: var(--danger); }
.medical-note { display: flex; margin: 22px 5px 0; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 11px; }
.medical-note i { color: var(--green); font-size: 18px; }

.reward-page-title { padding-bottom: 14px; }
.reward-page-title h1 { font-size: 35px; }
.reward-page-note { display: flex; margin-bottom: 24px; padding: 12px 14px; align-items: flex-start; gap: 8px; border-radius: var(--radius-md); background: var(--sage); color: var(--muted); font-size: 12px; }
.reward-page-note i { flex: 0 0 auto; color: var(--green); font-size: 20px; }
.reward-current { display: flex; margin: -10px 0 25px; padding: 14px 16px; align-items: center; gap: 13px; border: 1.5px solid color-mix(in srgb, var(--green) 34%, var(--line)); border-radius: var(--radius-lg); background: var(--sage); }
.reward-current__icon { display: grid; width: 54px; height: 54px; flex: 0 0 54px; place-items: center; border-radius: 18px; background: var(--surface); color: #4f855d; }
.reward-current__icon i { font-size: 34px; }
.reward-current div { display: flex; min-width: 0; flex-direction: column; }
.reward-current small { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.reward-current strong { font-size: 19px; }
.reward-current p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.reward-option-section { --reward-color: #4f855d; --reward-soft: var(--sage); margin-bottom: 26px; }
.reward-option-section--seed { --reward-color: #9a7047; --reward-soft: var(--cream); }
.reward-option-section--apple { --reward-color: #c7635a; --reward-soft: var(--peach); }
.reward-option-section--flower { --reward-color: #bb8a25; --reward-soft: #fff0c5; }
.reward-option-section--gem { --reward-color: #278462; --reward-soft: #dff2e9; }
.reward-option--green { --reward-color: #4f855d; --reward-soft: var(--sage); }
.reward-section-heading { display: flex; margin-bottom: 10px; align-items: center; justify-content: space-between; }
.reward-section-heading h2 { margin: 0; font-size: 23px; }
.reward-section-heading span { color: var(--muted); font-size: 12px; }
.reward-options-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.reward-option { display: flex; min-width: 0; min-height: 154px; padding: 10px 5px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid var(--line); border-radius: 20px; background: var(--surface-2); }
.reward-option.is-selected { border-color: var(--reward-color); background: var(--reward-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--reward-color) 15%, transparent); }
.reward-option strong { overflow: hidden; max-width: 100%; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.reward-glyph { position: relative; display: grid; width: 62px; height: 62px; place-items: center; border-radius: 22px; color: var(--reward-color); }
.reward-glyph > i:first-child { font-size: 40px; }
.reward-glyph--outline { border: 1.5px solid color-mix(in srgb, var(--reward-color) 35%, var(--line)); background: var(--surface); }
.reward-glyph--soft { background: var(--reward-soft); }
.reward-glyph--solid { background: var(--reward-color); color: white; box-shadow: 0 6px 14px color-mix(in srgb, var(--reward-color) 24%, transparent); }
.reward-glyph__accent { position: absolute; top: -5px; right: -5px; display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; background: var(--surface); color: var(--reward-color); font-size: 16px; }
.reward-mini { display: inline-flex; min-width: 43px; height: 27px; padding: 0 8px; align-items: center; justify-content: center; gap: 4px; border-radius: 11px; background: var(--surface); color: var(--reward-color); box-shadow: 0 2px 8px rgba(20, 50, 42, .06); }
.reward-mini i { font-size: 17px; }
.reward-mini b { color: var(--ink); font-size: 12px; }

.toast { position: fixed; z-index: 30; right: 20px; bottom: calc(90px + var(--safe-bottom)); left: 20px; max-width: 390px; margin: auto; padding: 13px 17px; border-radius: 15px; background: #092f2b; color: white; box-shadow: 0 12px 30px rgba(0,0,0,.25); opacity: 0; pointer-events: none; text-align: center; transform: translateY(15px); transition: opacity 180ms ease, transform 180ms ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 360px) {
    .screen { padding-right: 15px; padding-left: 15px; }
    .app-header { padding-right: 15px; padding-left: 15px; }
    .brand { font-size: 18px; }
    .brand__tree { width: 38px; height: 38px; }
    h1 { font-size: 39px; }
    .page-title-row h1 { font-size: 32px; }
    .quick-card { min-height: 104px; }
    .wellness-card { grid-template-columns: 1fr 92px; }
    .wellness-card img { width: 92px; }
    .severity-scale { gap: 4px; }
    .severity-scale button { border-radius: 13px; }
    .context-row { font-size: 11px; }
    .chip-row button { padding: 0 12px; }
    .measurement-variant-nav a { padding-right: 3px; padding-left: 3px; font-size: 10px; }
    .measurement-swipe { margin-right: -15px; margin-left: -15px; padding-right: 15px; padding-left: 15px; scroll-padding-left: 15px; }
    .measurement-modal { padding: 12px; }
    .measurement-popup { max-height: calc(100dvh - 24px); padding-right: 16px; padding-left: 16px; }
}

@media (min-width: 700px) {
    .app-shell { margin-top: 22px; margin-bottom: 22px; min-height: calc(100dvh - 44px); border-radius: 34px; }
    .bottom-nav { bottom: 22px; border-radius: 0 0 34px 34px; }
}

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