:root {
  --ink: #23312d;
  --muted: #718078;
  --cream: #f7f4ee;
  --paper: #fffdfa;
  --sage: #dce8d6;
  --sage-dark: #58735f;
  --coral: #ef8b68;
  --line: #e9e4dc;
  --nav: rgba(255, 253, 250, .92);
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  background: #e9e6df;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at top, #faf6ef, #e9e6df 55%); }
button, input { font: inherit; }
button { cursor: pointer; }

.app-shell { position: relative; min-height: 100vh; max-width: 480px; margin: 0 auto; padding: 0 20px 142px; background: var(--paper); overflow: hidden; }
.topbar { height: 76px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 9px; font-family: "Fraunces", Georgia, serif; font-size: 20px; font-weight: 600; letter-spacing: -.5px; }.brand b, .brand small { display: block; }.brand b { line-height: .92; }.brand small { margin-top: 4px; color: var(--sage-dark); font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif; font-size: 8px; font-weight: 700; letter-spacing: .75px; text-transform: uppercase; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 10px 10px 10px 3px; background: var(--coral); color: white; font-family: "Fraunces", Georgia, serif; font-size: 16px; }
.profile-button { padding: 0; border: 0; background: transparent; }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #e7ddd0; color: #755f50; font-weight: 700; font-size: 14px; }
.avatar.large { width: 72px; height: 72px; margin: 2px auto 16px; font-size: 25px; }

.screen { display: none; animation: fade-in .28s ease; }
.screen.active { display: block; }
@keyframes fade-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.hero { padding: 25px 2px 26px; }
.hero.short { padding-bottom: 20px; }
.eyebrow, .small-label, .meal-meta, .timeline-time { margin: 0; color: var(--sage-dark); font-weight: 700; font-size: 10px; letter-spacing: 1.35px; line-height: 1.4; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, .quote { font-family: "Fraunces", Georgia, serif; letter-spacing: -.85px; }
h1 { margin: 6px 0 10px; max-width: 370px; font-size: clamp(32px, 9vw, 43px); line-height: 1.05; font-weight: 600; }
h2 { margin: 5px 0 0; font-size: 24px; line-height: 1.12; }
h3 { font-size: 16px; line-height: 1.25; }
.hero-copy { max-width: 320px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

.onboarding { min-height: calc(100vh - 76px); padding: 36px 2px 120px; }.onboarding-brand { margin-bottom: 52px; }.onboarding-brand .brand-mark { width: 43px; height: 43px; border-radius: 15px 15px 15px 4px; font-size: 23px; }.onboarding-copy h1 { max-width: 350px; margin-top: 8px; font-size: clamp(34px, 10vw, 45px); }.onboarding-copy > p:last-child { margin: 0; max-width: 335px; color: var(--muted); font-size: 15px; line-height: 1.5; }.choice-group { display: grid; gap: 10px; margin: 37px 0 22px; padding: 0; border: 0; }.choice-group legend { margin-bottom: 12px; color: #66746c; font-size: 13px; font-weight: 700; }.choice-card { display: grid; grid-template-columns: 39px 1fr 22px; align-items: center; gap: 10px; width: 100%; padding: 13px 12px; border: 1px solid var(--line); border-radius: 16px; background: white; color: var(--ink); text-align: left; transition: border-color .2s, background .2s, transform .2s; }.choice-card:hover { transform: translateY(-1px); }.choice-card.selected { border-color: #94ae93; background: #f1f6ed; }.choice-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #f6eee7; color: var(--coral); font-size: 19px; }.choice-card strong, .choice-card small { display: block; }.choice-card strong { font-size: 14px; }.choice-card small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.25; }.choice-check { display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid #d8d6cf; border-radius: 50%; color: transparent; font-size: 11px; }.choice-card.selected .choice-check { border-color: var(--sage-dark); background: var(--sage-dark); color: white; }.onboarding-action { margin-top: 2px; }.onboarding-note { margin: 12px 0 0; color: #92928b; font-size: 11px; text-align: center; }

.readiness-card { display: grid; grid-template-columns: 44px 1fr; gap: 12px; margin-bottom: 34px; padding: 18px; border: 1px solid #d5e0cf; border-radius: 18px; background: #f0f6ed; }
.readiness-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: white; color: var(--sage-dark); font-size: 20px; }
.readiness-title { margin: 4px 0 5px; font-weight: 700; font-size: 15px; }
.readiness-copy { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.section-block { margin-bottom: 34px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-bottom: 13px; }
.section-heading.compact { align-items: center; }
.time-pill { padding: 7px 10px; border-radius: 99px; background: #f2eee7; color: #6e665e; font-size: 12px; font-weight: 700; }
.progress-text { margin: 0; color: var(--muted); font-size: 12px; }
.progress-track { height: 5px; overflow: hidden; border-radius: 10px; background: var(--line); }
.progress-track span { display: block; height: 100%; width: 25%; border-radius: inherit; background: var(--coral); transition: width .25s ease; }

.meal-card { display: grid; grid-template-columns: 101px 1fr; gap: 15px; padding: 10px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 8px 24px rgba(64, 54, 40, .05); }
.meal-illustration { display: grid; place-items: center; min-height: 124px; border-radius: 14px; font-size: 51px; }
.meal-illustration.lunch { background: linear-gradient(145deg, #eff0c9, #b9d7aa); }
.meal-content { align-self: center; padding: 4px 4px 2px 0; }
.meal-content h3 { margin: 4px 0 4px; }
.meal-content p:not(.meal-meta) { margin-bottom: 10px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.text-action { padding: 0; border: 0; background: transparent; color: #496b57; font-size: 12px; font-weight: 700; }
.text-action span { margin-left: 3px; font-size: 15px; }

.timeline { position: relative; display: grid; gap: 0; margin: 18px 0 0; padding: 0 0 0 22px; list-style: none; --timeline-progress: 0%; }.timeline::before, .timeline::after { position: absolute; top: 7px; bottom: 24px; left: 5px; width: 2px; border-radius: 3px; content: ""; }.timeline::before { background: rgba(72, 112, 85, .16); }.timeline::after { bottom: auto; height: var(--timeline-progress); background: linear-gradient(#8cc8a0, #367d5a); transition: height .6s ease; }.timeline-item { position: relative; padding-bottom: 22px; }.timeline-item::before { position: absolute; top: 4px; left: -21px; width: 11px; height: 11px; border: 2px solid #c7d3c9; border-radius: 50%; background: var(--paper); content: ""; transition: .3s; }.timeline-item.past::before { border-color: #78b98d; background: #78b98d; }.timeline-item.current::before { border-color: #2f765a; background: #fbfcf8; box-shadow: 0 0 0 4px rgba(74, 153, 103, .14); }.timeline-item.current h3 { color: #236947; }.timeline-item.past .timeline-time { color: #4a9068; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-status { z-index: 1; width: 31px; height: 31px; border: 1.5px solid #d0cdc5; border-radius: 50%; background: var(--paper); color: transparent; transition: .2s; }
.timeline-item.done .timeline-status { border-color: var(--sage-dark); background: var(--sage-dark); color: white; font-size: 14px; }
.timeline-time { margin: 1px 0 3px; color: #a29e96; font-size: 9px; }
.timeline-item h3 { margin: 0 0 2px; font-size: 14px; }
.timeline-item p:not(.timeline-time) { margin: 0; color: var(--muted); font-size: 12px; }

.insight-card { margin: 4px 0 35px; padding: 21px; border-radius: 22px; background: var(--ink); color: white; }
.insight-card .small-label { color: #b6d0ba; }
.insight-number { margin: 11px 0 5px; font-family: "Fraunces", Georgia, serif; font-size: 46px; line-height: .9; }.insight-number span { font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 500; }
.insight-card > p:last-child { margin: 0; color: #d8e0d8; font-size: 13px; line-height: 1.4; }
.week-chart { display: flex; align-items: flex-end; justify-content: space-between; height: 158px; padding: 15px 6px 0; border-bottom: 1px solid var(--line); }
.week-chart > div { display: grid; justify-items: center; gap: 8px; height: 100%; }.week-chart p { margin: 0; color: #96968f; font-size: 11px; }.week-chart .bar { display: block; align-self: end; width: 18px; border-radius: 8px 8px 3px 3px; background: #d8e5d2; }.week-chart .bar.low { height: 35px; }.week-chart .bar.mid { height: 70px; }.week-chart .bar.high { height: 103px; background: var(--sage-dark); }.week-chart .bar.empty { height: 7px; background: var(--line); }.week-chart .current p { color: var(--sage-dark); font-weight: 700; }
.quote { margin: 8px 0 0; max-width: 320px; font-size: 26px; line-height: 1.18; }

.coach-orb { display: grid; place-items: center; width: 92px; height: 92px; margin: 14px auto 23px; border-radius: 40% 60% 56% 44%; background: radial-gradient(circle at 35% 30%, #f5bdab, var(--coral) 60%, #d46d4d); box-shadow: 0 16px 30px rgba(232, 127, 91, .22); color: white; font-size: 33px; transform: rotate(-8deg); }
.coach-message { padding: 18px; border: 1px solid #dce7d7; border-radius: 18px 18px 18px 4px; background: #f1f6ed; }.coach-message p { margin: 0; color: #405247; font-size: 15px; line-height: 1.5; }
.quick-prompts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }.quick-prompts button { padding: 9px 11px; border: 1px solid #dedbd4; border-radius: 20px; background: white; color: #536359; font-size: 12px; }
.coach-input { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 15px; border: 1px solid #dcd8d1; border-radius: 16px; background: white; }.coach-input input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); }.coach-input button { display: grid; place-items: center; width: 35px; height: 35px; border: 0; border-radius: 12px; background: var(--ink); color: white; font-size: 19px; }
.coach-input .coach-voice { background: #eef7ed; color: #347858; font-size: 14px; }.coach-voice-status { min-height: 15px; margin: 7px 2px 0; color: #6b8171; font-size: 10px; }
.inline-voice-command { margin: 7px 0 0; padding: 7px 9px; border: 1px solid #c8dec9; border-radius: 10px; background: #f4faf3; color: #356e4e; font-size: 10px; font-weight: 700; }.inline-voice-status { min-height: 14px; margin: 5px 0 0; color: #6d8173; font-size: 10px; line-height: 1.3; }

.profile-hero { padding: 25px 0 24px; text-align: center; }.profile-hero h1 { margin: 5px 0 7px; max-width: none; font-size: 37px; }.profile-hero p:last-child { margin: 0; color: var(--muted); font-size: 14px; }.profile-list { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: white; }.profile-list button { display: flex; justify-content: space-between; width: 100%; padding: 18px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 14px; text-align: left; }.profile-list button:last-child { border-bottom: 0; }.profile-list button span:last-child { color: var(--sage-dark); }

.bottom-nav { position: fixed; z-index: 4; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; gap: min(7vw, 36px); max-width: 480px; min-height: 82px; margin: auto; padding: 9px 18px 14px; border-top: 1px solid rgba(224, 220, 211, .9); background: var(--nav); backdrop-filter: blur(12px); }.nav-item { display: grid; justify-items: center; gap: 3px; min-width: 51px; padding: 3px; border: 0; background: transparent; color: #92958e; font-size: 10px; }.nav-item > span:first-child { height: 25px; font-size: 22px; line-height: 22px; }.nav-item.active { color: var(--sage-dark); font-weight: 700; }.coach-nav > span:first-child { display: grid; place-items: center; width: 39px; height: 39px; margin-top: -19px; border: 4px solid var(--paper); border-radius: 50%; background: var(--coral); color: white; box-shadow: 0 5px 13px rgba(216, 105, 70, .25); }.coach-nav > span:last-child { margin-top: -1px; }
.onboarding-mode .bottom-nav { display: none; }

.modal-backdrop { position: fixed; z-index: 10; inset: 0; display: grid; align-items: end; visibility: hidden; background: rgba(32, 44, 38, .34); opacity: 0; transition: .2s; }.modal-backdrop.open { visibility: visible; opacity: 1; }.modal { position: relative; max-width: 480px; margin: auto; padding: 22px 22px 32px; border-radius: 26px 26px 0 0; background: var(--paper); transform: translateY(30px); transition: transform .25s ease; }.modal-backdrop.open .modal { transform: translateY(0); }.modal h2 { margin: 7px 0 10px; font-size: 29px; }.modal > p:not(.eyebrow) { color: var(--muted); font-size: 14px; line-height: 1.5; }.large-illustration { min-height: 110px; margin-bottom: 18px; }.modal-close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 31px; height: 31px; border: 0; border-radius: 50%; background: rgba(255,255,255,.8); color: var(--ink); font-size: 23px; }.tip-box { display: grid; grid-template-columns: 24px 1fr; gap: 8px; padding: 13px; border-radius: 12px; background: #f0f6ed; color: #496653; }.tip-box p { margin: 0; font-size: 12px; line-height: 1.4; }.primary-action { width: 100%; margin-top: 18px; padding: 15px; border: 0; border-radius: 13px; background: var(--ink); color: white; font-weight: 700; }.toast { position: fixed; z-index: 20; bottom: 96px; left: 50%; width: max-content; max-width: calc(100% - 40px); padding: 11px 15px; border-radius: 10px; background: var(--ink); color: white; font-size: 13px; opacity: 0; pointer-events: none; transform: translate(-50%, 15px); transition: .25s; }.toast.show { opacity: 1; transform: translate(-50%, 0); }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@media (min-width: 520px) { .app-shell { min-height: 880px; margin: 22px auto; border-radius: 28px; box-shadow: 0 28px 60px rgba(65, 56, 45, .17); }.bottom-nav { bottom: 22px; border-radius: 0 0 28px 28px; } }

/* Modern visual system: calm, editorial and mobile-first. */
:root { --ink: #17251f; --muted: #718078; --cream: #f5f7f2; --paper: #fbfcf8; --sage: #d8ead8; --sage-dark: #2f765a; --coral: #ff765c; --line: rgba(33, 57, 46, .10); --nav: rgba(251, 252, 248, .74); }
body { background: #dbe5dc; }
.app-shell { isolation: isolate; background: linear-gradient(155deg, #fbfcf8 0%, #f5f8f2 52%, #eef5ee 100%); }
.app-shell::before { position: absolute; z-index: -1; top: -150px; right: -165px; width: 370px; height: 370px; border-radius: 50%; background: radial-gradient(circle, rgba(137, 205, 165, .33), rgba(137, 205, 165, 0) 68%); content: ""; filter: blur(6px); }
.topbar { height: 88px; }
.brand { font-size: 21px; letter-spacing: -.7px; }.brand-mark { width: 31px; height: 31px; border-radius: 11px 11px 11px 4px; background: linear-gradient(145deg, #ff956e, #fa6856); box-shadow: 0 8px 18px rgba(242, 108, 85, .25); }.avatar { border: 2px solid rgba(255,255,255,.82); box-shadow: 0 5px 16px rgba(48, 64, 53, .12); }
.hero { padding-top: 31px; }.hero h1 { max-width: 355px; font-size: clamp(35px, 9.4vw, 45px); letter-spacing: -1.35px; }.eyebrow, .small-label, .meal-meta, .timeline-time { color: #438168; font-size: 9px; letter-spacing: 1.7px; }
.readiness-card { position: relative; overflow: hidden; border: 1px solid rgba(87, 143, 105, .18); border-radius: 22px; background: linear-gradient(135deg, rgba(235, 248, 234, .88), rgba(218, 240, 222, .7)); box-shadow: 0 16px 30px rgba(43, 86, 61, .07); }.readiness-card::after { position: absolute; right: -24px; bottom: -38px; width: 105px; height: 105px; border-radius: 50%; background: rgba(87, 166, 116, .10); content: ""; }.readiness-icon { background: linear-gradient(135deg, #fff, #e9f5e9); box-shadow: 0 5px 13px rgba(49, 104, 67, .09); }
.morning-checkin { margin: -17px 0 31px; padding: 17px; border: 1px solid rgba(255, 130, 96, .25); border-radius: 21px; background: linear-gradient(135deg, #fff6f0, #fffaf7); box-shadow: 0 12px 26px rgba(113, 72, 50, .07); }.morning-checkin h2 { margin: 5px 0 6px; font-size: 23px; }.morning-checkin p:not(.small-label) { margin: 0; color: #766960; font-size: 12px; line-height: 1.4; }.checkin-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }.checkin-actions button { padding: 8px 10px; border: 1px solid #edc8ba; border-radius: 99px; background: white; color: #795e50; font-size: 11px; font-weight: 700; }.checkin-actions .checkin-skip { border-color: transparent; background: transparent; color: #8a827b; font-weight: 500; }.morning-checkin-setting { margin: -5px 0 25px; }
.meal-card { position: relative; overflow: hidden; border-color: rgba(30, 58, 43, .09); border-radius: 24px; box-shadow: 0 14px 34px rgba(34, 56, 42, .08); }.meal-card::after { position: absolute; top: 0; right: 0; width: 50%; height: 3px; background: linear-gradient(90deg, transparent, #ff9377); content: ""; }.meal-illustration { border-radius: 18px; }.meal-illustration.lunch { background: linear-gradient(145deg, #eaf0cc, #a7d6a7); }.text-action { color: #267456; }.time-pill { background: rgba(237, 242, 232, .9); color: #38694f; }
.progress-track { height: 6px; background: rgba(58, 89, 70, .09); }.progress-track span { background: linear-gradient(90deg, #ff8b70, #ff6d59); box-shadow: 0 2px 7px rgba(255, 113, 88, .35); }.timeline::before { width: 2px; background: linear-gradient(#b1d5bb, var(--line)); }.timeline-status { border-color: #cad5cc; background: rgba(255,255,255,.85); box-shadow: 0 3px 10px rgba(36, 61, 45, .05); }.timeline-item.done .timeline-status { background: linear-gradient(135deg, #3a8867, #236147); box-shadow: 0 5px 12px rgba(35, 97, 71, .24); }
.insight-card { position: relative; overflow: hidden; border-radius: 26px; background: linear-gradient(135deg, #1b362a, #245940); box-shadow: 0 19px 35px rgba(24, 64, 45, .20); }.insight-card::after { position: absolute; top: -60px; right: -60px; width: 200px; height: 200px; border: 1px solid rgba(208, 255, 217, .17); border-radius: 50%; content: ""; }.insight-number { position: relative; z-index: 1; }.week-chart .bar.high { background: linear-gradient(#68b78d, #2c7658); box-shadow: 0 4px 9px rgba(42, 109, 81, .19); }
.coach-orb { width: 104px; height: 104px; border: 7px solid rgba(255,255,255,.78); background: radial-gradient(circle at 34% 28%, #ffd6bd, #ff8c70 46%, #e85455 78%); box-shadow: 0 20px 38px rgba(224, 93, 75, .28); }.coach-message { border-color: rgba(76, 145, 102, .17); border-radius: 22px 22px 22px 6px; background: rgba(237, 248, 237, .85); box-shadow: 0 10px 22px rgba(47, 92, 64, .05); }.quick-prompts button { border-color: rgba(45, 98, 71, .13); border-radius: 99px; background: rgba(255,255,255,.78); box-shadow: 0 4px 12px rgba(40, 66, 50, .05); }.coach-input { border-color: rgba(35, 81, 57, .14); border-radius: 18px; box-shadow: 0 9px 25px rgba(37, 67, 49, .07); }.coach-input button { border-radius: 14px; background: linear-gradient(135deg, #277254, #174934); }
.profile-list { border-color: rgba(35, 75, 52, .10); border-radius: 22px; box-shadow: 0 12px 26px rgba(38, 66, 49, .05); }.bottom-nav { min-height: 86px; border-top-color: rgba(255,255,255,.75); background: var(--nav); box-shadow: 0 -12px 30px rgba(38, 61, 47, .06); }.nav-item.active { color: #1d7555; }.coach-nav > span:first-child { background: linear-gradient(145deg, #ff9271, #f75f59); box-shadow: 0 8px 20px rgba(231, 93, 77, .29); }
.onboarding { position: relative; overflow: hidden; padding-top: 52px; }.onboarding::after { position: absolute; z-index: -1; bottom: -100px; left: -115px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 162, 122, .17), rgba(255, 162, 122, 0) 68%); content: ""; }.onboarding-brand { margin-bottom: 58px; }.onboarding-brand .brand-mark { width: 48px; height: 48px; border-radius: 16px 16px 16px 5px; font-size: 25px; }.onboarding-copy h1 { max-width: 370px; font-size: clamp(37px, 10.5vw, 47px); letter-spacing: -1.55px; }.choice-group { gap: 11px; }.choice-card { border-color: rgba(39, 78, 56, .10); border-radius: 19px; background: rgba(255,255,255,.68); box-shadow: 0 7px 16px rgba(42, 69, 53, .035); backdrop-filter: blur(8px); }.choice-card:hover { border-color: rgba(48, 117, 82, .32); box-shadow: 0 12px 23px rgba(39, 76, 54, .08); }.choice-card.selected { border-color: rgba(48, 125, 86, .55); background: linear-gradient(135deg, rgba(240, 250, 239, .94), rgba(222, 243, 224, .9)); box-shadow: 0 13px 24px rgba(48, 105, 73, .10); }.choice-icon { border-radius: 13px; background: linear-gradient(145deg, #fff4ed, #ffe4d4); }.choice-card.selected .choice-icon { background: linear-gradient(145deg, #e1f3df, #c8e9ce); color: #287254; }.choice-check { border-color: rgba(50, 88, 65, .16); }.choice-card.selected .choice-check { background: linear-gradient(135deg, #3e8a68, #276c4f); }.primary-action { border-radius: 16px; background: linear-gradient(135deg, #1e5d43, #123e2c); box-shadow: 0 13px 25px rgba(23, 73, 51, .22); transition: transform .2s, box-shadow .2s; }.primary-action:hover { box-shadow: 0 17px 28px rgba(23, 73, 51, .28); transform: translateY(-1px); }

.meal-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }.adjust-meal { color: #a25e4d; }.timeline .adjust-meal { margin-top: 7px; font-size: 11px; }.adjustment-modal textarea { width: 100%; margin-top: 15px; padding: 12px; border: 1px solid rgba(39, 78, 56, .16); border-radius: 14px; outline-color: #74ae88; background: #fff; color: var(--ink); font-size: 13px; line-height: 1.4; resize: vertical; }.adjustment-intent { display: flex; gap: 8px; margin-top: 16px; }.adjustment-intent button { flex: 1; padding: 10px; border: 1px solid #d5ded2; border-radius: 13px; background: #fff; color: #506957; font-size: 12px; font-weight: 700; }.adjustment-intent button.selected { border-color: #4c966f; background: #e7f4e7; color: #236947; }.adjustment-input-actions { display: flex; gap: 8px; margin-top: 10px; }.voice-action { padding: 10px 12px; border: 1px solid #d7c8c0; border-radius: 12px; background: #fff9f6; color: #8a5e4d; font-size: 12px; font-weight: 700; }.adjustment-input-actions .agent-action { margin-top: 0; }.voice-status { min-height: 16px; margin: 8px 0 0; color: #758279; font-size: 11px; }.adjustment-result { margin-top: 14px; padding: 13px; border-radius: 14px; background: #edf7ec; color: #3e694d; font-size: 12px; line-height: 1.4; }.adjustment-result > p { margin: 0 0 10px; }.proposal-choice { display: grid; gap: 3px; width: 100%; margin-top: 8px; padding: 11px; border: 1px solid rgba(47, 118, 90, .18); border-radius: 12px; background: white; color: #315f49; text-align: left; }.proposal-choice strong { font-size: 12px; }.proposal-choice span { color: #6b8172; font-size: 11px; line-height: 1.35; }

.plan-intro { display: grid; grid-template-columns: 30px 1fr; gap: 11px; margin: -5px 0 26px; padding: 15px; border: 1px solid rgba(49, 117, 82, .14); border-radius: 18px; background: linear-gradient(135deg, #eff8ef, #f8fbf6); color: #456d54; }.plan-intro > span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 10px; background: #d9efd9; color: #287452; }.plan-intro p { margin: 1px 0 0; font-size: 12px; line-height: 1.4; }.plan-intro strong { color: #255e40; }.two-week-plan { margin-bottom: 18px; }.plan-switch { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin: 15px 0; padding: 4px; border-radius: 14px; background: #edf1ea; }.plan-switch button { padding: 10px 7px; border: 0; border-radius: 10px; background: transparent; color: #738177; font-size: 12px; font-weight: 700; }.plan-switch button.selected { background: white; color: #276b4b; box-shadow: 0 3px 9px rgba(39, 78, 56, .08); }.plan-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 14px; }.plan-days button { display: grid; justify-items: center; gap: 3px; min-height: 49px; padding: 5px 2px; border: 1px solid rgba(39, 78, 56, .10); border-radius: 12px; background: rgba(255,255,255,.75); color: #77857b; }.plan-days button span { font-size: 9px; }.plan-days button b { font-size: 13px; }.plan-days button.selected { border-color: #4b996d; background: #e8f5e8; color: #236947; }.plan-detail { padding: 17px; border: 1px solid rgba(39, 78, 56, .12); border-radius: 20px; background: rgba(255,255,255,.72); box-shadow: 0 10px 23px rgba(39, 78, 56, .05); }.plan-detail h3 { margin: 5px 0 14px; font-family: "Fraunces", Georgia, serif; font-size: 22px; letter-spacing: -.4px; }.plan-meals { display: grid; gap: 9px; }.plan-meals p { display: grid; gap: 2px; margin: 0; padding-left: 10px; border-left: 2px solid #abd5b3; color: #496857; font-size: 12px; line-height: 1.35; }.plan-meals span { color: #2b754f; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }.plan-detail-note { margin: 14px 0 0; color: #748479; font-size: 11px; line-height: 1.4; }.plan-safety-note { margin: 0 0 25px; color: #8b786d; font-size: 10px; line-height: 1.4; }

.plan-meals button { display: grid; gap: 3px; width: 100%; padding: 10px; border: 0; border-left: 2px solid #abd5b3; background: #f8fbf6; color: #496857; text-align: left; font-size: 12px; line-height: 1.35; }.plan-meals button:hover { background: #edf7ec; }.menu-options { display: grid; gap: 9px; margin: 16px 0; }.menu-options button { display: grid; gap: 3px; width: 100%; padding: 13px; border: 1px solid rgba(39, 78, 56, .14); border-radius: 14px; background: white; color: #315f49; text-align: left; }.menu-options button.selected { border-color: #4c966f; background: #e8f5e8; }.menu-options strong { font-size: 13px; }.menu-options span { color: #6b8172; font-size: 11px; }

.cambusa-note { display: grid; grid-template-columns: 27px 1fr; gap: 9px; margin: -3px 0 18px; padding: 13px; border: 1px solid rgba(240, 143, 94, .19); border-radius: 16px; background: #fff7f0; color: #785f4f; }.cambusa-note > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: #ffe8d8; color: #d97050; }.cambusa-note p { margin: 1px 0 0; font-size: 11px; line-height: 1.42; }.cambusa-note strong { color: #895437; }

.cambusa-zones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: -7px 0 19px; }.cambusa-zone { display: grid; justify-items: center; gap: 2px; min-height: 104px; padding: 10px 5px; border: 1px solid rgba(39, 78, 56, .11); border-radius: 19px; background: rgba(255,255,255,.72); color: #697c6f; }.cambusa-zone > span { display: grid; place-items: center; width: 43px; height: 43px; margin-bottom: 2px; border-radius: 14px; background: #edf2ea; color: #3f8662; font-size: 23px; }.cambusa-zone strong { font-size: 12px; }.cambusa-zone small { color: #8a978e; font-size: 10px; }.cambusa-zone.selected { border-color: #4e9a70; background: linear-gradient(145deg, #eef9ef, #e2f2e5); color: #246a4a; box-shadow: 0 8px 18px rgba(43, 112, 73, .08); }.cambusa-zone.selected > span { background: #d5edda; color: #25734e; }.cambusa-shelf { margin-bottom: 17px; padding: 17px; border: 1px solid rgba(39, 78, 56, .11); border-radius: 20px; background: rgba(255,255,255,.68); }.cambusa-shelf h2 { margin: 5px 0 14px; font-family: "DM Sans", sans-serif; font-size: 16px; letter-spacing: 0; }.cambusa-balance { margin: 0 0 18px; padding: 15px; border-radius: 18px; background: linear-gradient(135deg, #1e5039, #2d7152); color: white; }.cambusa-balance .small-label { color: #b9ddc0; }.cambusa-balance p:last-child { margin: 7px 0 0; color: #e3f2e5; font-size: 12px; line-height: 1.45; }.cambusa-agent { margin-bottom: 18px !important; }.cambusa-agent textarea { margin-top: 13px; }

.cambusa-zones { grid-template-columns: repeat(4, 1fr); gap: 7px; }.cambusa-zone { min-height: 94px; padding: 9px 3px; }.cambusa-zone > span { width: 38px; height: 38px; font-size: 20px; }.cambusa-zone strong { font-size: 11px; }.cambusa-zone small { font-size: 9px; }.cambusa-zone.shopping[data-autonomy="green"] { border-color: #4e9a70; background: #e8f5e8; color: #236947; }.cambusa-zone.shopping[data-autonomy="green"] > span { background: #d0ebd5; color: #24744f; }.cambusa-zone.shopping[data-autonomy="yellow"] { border-color: #dfb759; background: #fff8df; color: #836716; }.cambusa-zone.shopping[data-autonomy="yellow"] > span { background: #fff0bb; color: #a17813; }.cambusa-zone.shopping[data-autonomy="red"] { border-color: #e09a86; background: #fff2ee; color: #a25947; }.cambusa-zone.shopping[data-autonomy="red"] > span { background: #ffe0d6; color: #bd624b; }.cambusa-shopping { margin: 0 0 17px; padding: 17px; border: 1px solid rgba(39, 78, 56, .11); border-radius: 20px; background: rgba(255,255,255,.68); }.cambusa-shopping h2 { margin: 5px 0 8px; font-family: "DM Sans", sans-serif; font-size: 16px; letter-spacing: 0; }.cambusa-shopping > p { margin: 0; color: #657a6d; font-size: 12px; line-height: 1.4; }.cambusa-shopping ul, .cambusa-inventory ul { display: grid; gap: 8px; margin: 14px 0; padding: 0; list-style: none; }.cambusa-shopping li { padding-left: 11px; border-left: 2px solid #9acaa7; color: #426d53; font-size: 12px; line-height: 1.35; }.shopping-note { color: #8b786d !important; font-size: 10px !important; }.cambusa-inventory { margin: 0 0 17px; border: 1px solid rgba(39, 78, 56, .11); border-radius: 15px; background: rgba(255,255,255,.60); }.cambusa-inventory summary { display: flex; align-items: center; gap: 7px; padding: 13px; cursor: pointer; list-style: none; color: #466c54; font-size: 12px; font-weight: 700; }.cambusa-inventory summary::-webkit-details-marker { display: none; }.cambusa-inventory summary span { display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 9px; background: #e2f1e3; color: #2c744f; font-size: 10px; }.cambusa-inventory summary b { margin-left: auto; color: #4b8967; font-size: 15px; transition: transform .2s; }.cambusa-inventory[open] summary b { transform: rotate(180deg); }.cambusa-inventory > div { padding: 0 13px 13px; border-top: 1px solid rgba(39, 78, 56, .08); }.cambusa-inventory li { padding-left: 10px; border-left: 2px solid #c4dfc9; color: #5e7465; font-size: 11px; }.cambusa-inventory p { margin: 12px 0 0; color: #758278; font-size: 11px; }

.shopping-row { display: grid; grid-template-columns: 19px 1fr; gap: 9px; align-items: start; cursor: pointer; }.shopping-row input { width: 17px; height: 17px; margin: 0; accent-color: #397f5d; }.shopping-row input:checked + span { color: #8b988e; text-decoration: line-through; }.receipt-import { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(39, 78, 56, .10); }.receipt-import h3 { margin: 5px 0 6px; font-family: "DM Sans", sans-serif; font-size: 15px; }.receipt-import > p:not(.receipt-status):not(.receipt-privacy) { margin: 0; color: #657a6d; font-size: 11px; line-height: 1.4; }.receipt-upload { display: inline-flex; align-items: center; gap: 7px; margin-top: 13px; padding: 10px 12px; border: 1px dashed #76aa82; border-radius: 12px; background: #eff8ef; color: #286a49; font-size: 12px; font-weight: 700; }.receipt-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }.receipt-upload span { font-size: 16px; }.receipt-import img { display: block; width: 100%; max-height: 150px; margin-top: 12px; object-fit: contain; border: 1px solid rgba(39, 78, 56, .12); border-radius: 12px; background: white; }.receipt-status { min-height: 15px; margin: 8px 0 0; color: #688173; font-size: 10px; line-height: 1.35; }.receipt-import textarea { width: 100%; margin-top: 9px; padding: 10px; border: 1px solid rgba(39, 78, 56, .14); border-radius: 12px; outline-color: #74ae88; background: white; color: var(--ink); font-size: 12px; resize: vertical; }.receipt-total-field { display: flex; align-items: center; gap: 7px; margin-top: 9px; color: #526d5b; font-size: 11px; font-weight: 700; }.receipt-total-field input { width: 85px; height: 37px; padding: 0 8px; border: 1px solid rgba(39, 78, 56, .14); border-radius: 10px; outline-color: #74ae88; background: white; }.receipt-total-field b { color: #6e8275; }.receipt-import .agent-action { margin-top: 10px; }.cost-analysis { display: grid; gap: 3px; margin-top: 12px; padding: 11px; border-radius: 12px; background: #edf7ec; color: #406a4e; }.cost-analysis strong { font-size: 12px; }.cost-analysis span { color: #66806f; font-size: 10px; line-height: 1.35; }.receipt-privacy { margin: 10px 0 0; color: #87948b; font-size: 10px; line-height: 1.35; }

.receipt-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }.receipt-demo-button { margin-top: 13px; padding: 10px 12px; border: 1px solid #dec9bd; border-radius: 12px; background: #fff9f6; color: #8a5e4d; font-size: 12px; font-weight: 700; }.receipt-demo { display: grid; gap: 7px; margin-top: 13px; padding: 14px; border-radius: 5px 5px 14px 14px; background: #fffdf8; color: #4b4b45; box-shadow: 0 8px 16px rgba(60, 51, 38, .10); font-family: "DM Mono", "Courier New", monospace; font-size: 10px; }.receipt-demo > div { display: grid; gap: 2px; padding-bottom: 8px; border-bottom: 1px dashed #bfc1b7; text-align: center; }.receipt-demo > div span { font-size: 12px; font-weight: 700; letter-spacing: .7px; }.receipt-demo small { color: #85857d; font-size: 9px; }.receipt-demo p, .receipt-demo > strong { display: flex; justify-content: space-between; gap: 12px; margin: 0; }.receipt-demo > strong { margin-top: 4px; padding-top: 8px; border-top: 1px dashed #bfc1b7; font-size: 11px; }

.report-toggle { display: grid; grid-template-columns: 22px 1fr; column-gap: 7px; align-items: center; width: 100%; margin: 18px 0 0; padding: 12px; border: 1px solid rgba(39, 78, 56, .13); border-radius: 14px; background: #f3f8f1; color: #356d4e; text-align: left; font-size: 12px; font-weight: 700; }.report-toggle > span { grid-row: span 2; font-size: 18px; }.report-toggle small { color: #708374; font-size: 10px; font-weight: 400; }.cost-reports { margin-top: 12px; padding: 15px; border: 1px solid rgba(46, 125, 88, .15); border-radius: 18px; background: linear-gradient(135deg, #eef8ef, #f8fbf6); }.cost-reports h3 { margin: 5px 0 12px; font-family: "DM Sans", sans-serif; font-size: 15px; }.report-switch { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 12px; padding: 3px; border-radius: 11px; background: #e1ece0; }.report-switch button { padding: 8px; border: 0; border-radius: 8px; background: transparent; color: #708174; font-size: 11px; font-weight: 700; }.report-switch button.selected { background: white; color: #286b4a; box-shadow: 0 2px 6px rgba(39, 78, 56, .08); }.cost-report-summary { padding: 12px; border-radius: 13px; background: white; color: #426a50; }.cost-report-summary > div { display: grid; gap: 2px; }.cost-report-summary strong { font-family: "Fraunces", Georgia, serif; font-size: 25px; }.cost-report-summary span, .cost-report-summary p { color: #6f8374; font-size: 10px; }.cost-report-summary p { margin: 8px 0 0; }.market-watch { margin-top: 12px; padding: 12px; border-radius: 13px; background: #fff8f1; color: #805f48; }.market-watch .small-label { color: #b47750; }.market-watch p:last-child { margin: 6px 0 0; font-size: 10px; line-height: 1.4; }

.manual-stock { margin: 0 0 18px; padding: 17px; border: 1px solid rgba(39, 78, 56, .12); border-radius: 20px; background: rgba(255,255,255,.70); }.manual-stock h2 { margin: 5px 0 5px; font-family: "DM Sans", sans-serif; font-size: 16px; letter-spacing: 0; }.manual-stock > p:not(.small-label) { margin: 0 0 13px; color: #6d8072; font-size: 11px; line-height: 1.4; }.manual-stock-form { display: grid; grid-template-columns: 1fr 100px; gap: 8px; }.manual-stock-form input, .manual-stock-form select { min-width: 0; height: 40px; padding: 0 10px; border: 1px solid rgba(39, 78, 56, .14); border-radius: 11px; outline-color: #74ae88; background: white; color: var(--ink); font-size: 12px; }.manual-stock-form > input { grid-column: 1 / -1; }.manual-price { position: relative; }.manual-price input { width: 100%; padding-right: 24px; }.manual-price b { position: absolute; top: 12px; right: 8px; color: #6f8175; font-size: 10px; }.manual-stock .agent-action { margin-top: 10px; }.manual-items-list { display: grid; gap: 7px; margin-top: 12px; }.manual-items-list article { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 9px 10px; border-radius: 11px; background: #f3f8f1; }.manual-items-list strong, .manual-items-list span { display: block; }.manual-items-list strong { color: #3d674b; font-size: 11px; }.manual-items-list span, .manual-items-list > p { margin: 0; color: #77877d; font-size: 10px; }.manual-items-list button { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: white; color: #a4624f; font-size: 17px; }

.loaded-foods { display: flex; flex-wrap: wrap; gap: 7px; min-height: 40px; margin-bottom: 12px; }.loaded-foods p { margin: 4px 0 0; color: #849188; font-size: 11px; }.loaded-food { display: inline-flex; overflow: hidden; border-radius: 99px; background: #e7f4e7; color: #286b4a; }.loaded-food span { padding: 8px 7px 8px 10px; font-size: 11px; font-weight: 700; }.loaded-food button { padding: 0 9px; border: 0; border-left: 1px solid #c7e2c7; background: transparent; color: #48775a; font-size: 10px; font-weight: 700; }.loaded-food button:hover { background: #d5edd6; }.stock-toggle { padding: 0; border: 0; background: transparent; color: #377858; font-size: 11px; font-weight: 700; }.stock-toggle + .chip-list { margin-top: 12px; }.manual-stock-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }.manual-price { min-width: 0; }

.manual-zone-message { min-height: 15px; margin: 9px 0 0; color: #547764; font-size: 11px; line-height: 1.35; }.manual-zone-question { margin-top: 10px; padding: 11px; border: 1px solid #e7bd85; border-radius: 13px; background: #fff7e8; color: #855b38; }.manual-zone-question p { margin: 0 0 9px; font-size: 11px; }.manual-zone-question > div { display: flex; flex-wrap: wrap; gap: 6px; }.manual-zone-question button { padding: 7px 9px; border: 1px solid #e5bd8d; border-radius: 99px; background: white; color: #805632; font-size: 11px; font-weight: 700; }

.manual-command-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }.manual-command-actions .agent-action { margin-top: 10px; }.voice-command, .manual-edit-stock { padding: 9px 11px; border: 1px solid #c8dec9; border-radius: 12px; background: #f4faf3; color: #356e4e; font-size: 11px; font-weight: 700; }.manual-edit-stock { display: block; margin-top: 9px; }

.manual-quantity-panel { display: grid; gap: 8px; margin: -8px 0 18px; padding: 14px; border: 1px solid rgba(39, 78, 56, .12); border-radius: 17px; background: #f8fbf7; }.manual-quantity-panel > p:not(.small-label) { margin: 0; color: #687d70; font-size: 11px; }.manual-quantity-panel > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.manual-quantity-panel label { display: grid; gap: 5px; color: #496453; font-size: 10px; font-weight: 700; }.manual-quantity-panel input, .manual-quantity-panel select { width: 100%; height: 38px; padding: 0 9px; border: 1px solid rgba(39, 78, 56, .14); border-radius: 10px; background: white; color: var(--ink); }.manual-quantity-panel button { grid-column: 1 / -1; justify-self: start; }
.manual-photo-import { display: grid; gap: 9px; margin: 0 0 18px; padding: 15px; border: 1px solid rgba(39, 78, 56, .12); border-radius: 17px; background: #f8fbf7; }.manual-photo-import h2 { margin: 0; font-family: "DM Sans", sans-serif; font-size: 15px; }.manual-photo-import > p:not(.small-label) { margin: 0; color: #687d70; font-size: 11px; line-height: 1.4; }.manual-photo-import .receipt-upload { justify-self: start; margin-top: 2px; }.manual-photo-import img { width: 100%; max-height: 190px; object-fit: cover; border-radius: 12px; }
.confirm-quantity { width: 100%; justify-content: center; margin: -7px 0 14px; }

.optional-module { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border: 1px solid rgba(39, 78, 56, .10); border-radius: 18px; background: rgba(255,255,255,.7); }.optional-module > div { min-width: 0; }.optional-module > div > span { display: flex; align-items: center; gap: 11px; color: var(--ink); font-size: 13px; font-weight: 700; }.optional-module i { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 8px; background: #e7f2e6; color: #347957; font-style: normal; font-size: 13px; }.optional-module small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.profile-list .optional-module { padding: 18px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.profile-list .module-option { align-items: center; border-bottom: 0; }.profile-list .module-option > span:first-child { display: flex; align-items: center; gap: 11px; min-width: 0; }.profile-list .module-copy { display: grid; gap: 3px; }.profile-list .module-copy strong { color: var(--ink); font-size: 14px; }.profile-list .module-copy small { color: var(--muted); font-size: 10px; line-height: 1.3; }.module-switch { position: relative; flex: 0 0 auto; width: 43px; height: 25px; padding: 2px; border-radius: 20px; background: #d8dcd7; transition: .2s; }.module-switch > span { display: block; width: 21px; height: 21px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(28, 54, 39, .16); transition: transform .2s; }.module-option.active .module-switch { background: #3c8965; }.module-option.active .module-switch > span { transform: translateX(18px); }
.diet-options { display: grid; gap: 9px; }.diet-options button { padding: 14px; border: 1px solid rgba(39, 78, 56, .12); border-radius: 16px; background: rgba(255,255,255,.72); color: var(--ink); text-align: left; }.diet-options button.selected { border-color: #4c966f; background: #eaf6e9; }.diet-options strong, .diet-options small { display: block; }.diet-options strong { font-size: 13px; }.diet-options small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.35; }.diet-advice { margin-top: 16px; padding: 14px; border-radius: 15px; background: #edf7ec; color: #39674c; }.diet-advice p { margin: 5px 0 0; font-size: 11px; line-height: 1.4; }
.plan-meal-card { display: grid; gap: 10px; padding: 13px; border: 1px solid rgba(39, 78, 56, .12); border-radius: 15px; background: rgba(255,255,255,.7); }.plan-meal-card > div:first-child { display: grid; gap: 3px; }.plan-meal-card > div:first-child span { color: #668071; font-size: 10px; font-weight: 700; text-transform: uppercase; }.plan-meal-card strong { color: var(--ink); font-size: 12px; line-height: 1.35; }.plan-meal-card > div:last-child { display: flex; gap: 7px; }.plan-meal-card button { padding: 8px 10px; border: 1px solid #cfe0cf; border-radius: 10px; background: white; color: #397557; font-size: 11px; font-weight: 700; }.plan-meal-card button.confirmed { border-color: transparent; background: #dff1df; color: #26704a; }
.modal-backdrop { align-items: end; padding-top: 12px; }.modal { width: 100%; max-height: calc(100dvh - 12px); padding-bottom: calc(30px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }.adjustment-modal { max-height: calc(100dvh - 12px); }
.clinical-plan { display: grid; gap: 9px; margin-top: 12px; padding: 14px; border: 1px solid #e7bd85; border-radius: 16px; background: #fff8ed; color: #805b3d; font-size: 11px; }.clinical-plan p { margin: 0; line-height: 1.4; }.clinical-plan textarea { width: 100%; resize: vertical; padding: 10px; border: 1px solid #e3bd90; border-radius: 11px; background: white; color: var(--ink); font: inherit; }.clinical-plan label { display: flex; gap: 8px; align-items: start; line-height: 1.35; }.clinical-plan input { margin-top: 1px; accent-color: #a96e37; }
.calorie-indicator { display: grid; gap: 9px; margin-top: 17px; padding: 15px; border: 1px solid rgba(39, 78, 56, .13); border-radius: 18px; background: #f4faf3; }.calorie-indicator h2 { margin: 0; font-family: "DM Sans", sans-serif; font-size: 16px; }.calorie-indicator > p:not(.small-label) { margin: 0; color: #667c6c; font-size: 11px; line-height: 1.4; }.calorie-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.calorie-fields label { display: grid; gap: 5px; color: #496453; font-size: 10px; font-weight: 700; }.calorie-fields select { width: 100%; height: 39px; padding: 0 8px; border: 1px solid rgba(39, 78, 56, .14); border-radius: 10px; background: white; color: var(--ink); font-size: 11px; }.calorie-estimate { display: grid; gap: 4px; padding: 11px; border-radius: 12px; background: white; color: #557261; font-size: 11px; line-height: 1.35; }.calorie-estimate strong { color: #286547; font-size: 13px; }

.quick-stock-options { display: grid; gap: 13px; margin-top: 12px; padding: 13px; border: 1px solid #d7e8d7; border-radius: 14px; background: #f7fbf6; }.quick-stock-options > p { margin: 0; color: #647a6a; font-size: 11px; line-height: 1.35; }.quick-stock-group { display: grid; gap: 7px; }.quick-stock-group > strong { color: #356d4e; font-size: 11px; }

.account-button { margin-left: auto; margin-right: 9px; padding: 8px 10px; border: 1px solid rgba(39, 102, 72, .18); border-radius: 11px; background: rgba(255,255,255,.72); color: #286747; font-size: 11px; font-weight: 700; }.account-button.connected { border-color: transparent; background: #e2f1e4; color: #236947; }.account-modal { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }.account-modal .settings-field input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid rgba(39, 78, 56, .14); border-radius: 14px; outline-color: #74ae88; background: white; color: var(--ink); font-size: 14px; }.account-status { min-height: 34px; margin: 15px 0 0 !important; color: #647a6a !important; font-size: 11px !important; line-height: 1.45; }.account-modal .secondary-action { margin-top: 14px; }
.access-locked { filter: blur(8px); pointer-events: none; user-select: none; }

/* Profile settings */
.habit-context { display: grid; grid-template-columns: 29px 1fr 28px; gap: 10px; align-items: start; margin: -5px 0 18px; padding: 13px; border: 1px solid rgba(46, 125, 88, .15); border-radius: 16px; background: linear-gradient(135deg, #eef8ef, #f8fbf6); color: #426d53; }.habit-context > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; background: #d9efd9; color: #287452; font-size: 14px; }.habit-context p { margin: 1px 0 0; font-size: 11px; line-height: 1.42; }.habit-context strong { color: #255e40; }.habit-info-button { display: grid; place-items: center; width: 27px; height: 27px; padding: 0; border: 1px solid #8cc49a; border-radius: 50%; background: white; color: #287452; font-family: Georgia, serif; font-size: 15px; font-weight: 700; }.habit-info-button:hover { background: #d9efd9; }.habit-explainer { grid-column: 1 / -1; margin-top: 2px; padding-top: 10px; border-top: 1px solid rgba(39, 78, 56, .10); }.habit-explainer p { margin: 0 0 9px; color: #63796b; font-size: 11px; line-height: 1.4; }.habit-explainer ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }.habit-explainer li { display: grid; gap: 2px; padding-left: 11px; border-left: 2px solid #a8d1af; font-size: 11px; }.habit-explainer li strong { color: #2b6747; }.habit-explainer li span { color: #687d70; line-height: 1.35; }
.profile-list button > span:first-child { display: flex; align-items: center; gap: 11px; }.profile-list i { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 8px; background: #e7f2e6; color: #347957; font-style: normal; font-size: 13px; }.settings-screen { padding: 17px 2px 22px; }.back-button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 0; border: 0; background: transparent; color: #397258; font-size: 12px; font-weight: 700; }.back-button:first-letter { font-size: 20px; }.settings-heading { padding: 21px 0 26px; }.settings-heading h1 { margin: 6px 0 10px; font-size: clamp(34px, 9.5vw, 44px); }.settings-heading > p:last-child { max-width: 348px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }.settings-options { display: grid; gap: 10px; margin: 0 0 20px; padding: 0; border: 0; }.settings-options legend { margin-bottom: 12px; font-size: 13px; font-weight: 700; }.setting-choice { display: grid; grid-template-columns: 42px 1fr 23px; align-items: center; gap: 10px; width: 100%; padding: 13px; border: 1px solid rgba(39, 78, 56, .10); border-radius: 18px; background: rgba(255,255,255,.68); color: var(--ink); text-align: left; transition: .2s; }.setting-choice.selected { border-color: rgba(48, 125, 86, .55); background: #eff8ef; box-shadow: 0 10px 20px rgba(39, 92, 60, .08); }.setting-choice strong, .setting-choice small { display: block; }.setting-choice strong { font-size: 14px; }.setting-choice small { margin-top: 3px; color: var(--muted); font-size: 11px; }.selection-dot { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid rgba(50, 88, 65, .16); border-radius: 50%; color: transparent; font-size: 11px; }.setting-choice.selected .selection-dot { border-color: transparent; background: #347d5a; color: white; }.settings-field { display: block; margin: 17px 0 19px; }.settings-field > span { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 700; }.settings-field em { color: var(--muted); font-size: 11px; font-style: normal; font-weight: 400; }.settings-field textarea { width: 100%; resize: vertical; padding: 13px; border: 1px solid rgba(39, 78, 56, .13); border-radius: 15px; outline-color: #74ae88; background: rgba(255,255,255,.7); color: var(--ink); font-size: 13px; line-height: 1.45; }.settings-field textarea::placeholder { color: #a5aaa4; }.habit-list, .privacy-list { display: grid; gap: 10px; margin-bottom: 22px; }.habit-list article, .privacy-list article { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border: 1px solid rgba(39, 78, 56, .09); border-radius: 18px; background: rgba(255,255,255,.7); box-shadow: 0 7px 17px rgba(42, 69, 53, .035); }.habit-list article > div { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; }.habit-icon { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: #fff1e7; color: #ec705a; font-size: 16px; }.habit-list h2, .privacy-list h2 { margin: 0 0 3px; font-family: "DM Sans", sans-serif; font-size: 13px; letter-spacing: 0; }.habit-list p, .privacy-list p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.35; }.switch { position: relative; flex: 0 0 auto; width: 43px; height: 25px; padding: 2px; border: 0; border-radius: 20px; background: #d8dcd7; transition: .2s; }.switch span { display: block; width: 21px; height: 21px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(28, 54, 39, .16); transition: transform .2s; }.switch.active { background: #3c8965; }.switch.active span { transform: translateX(18px); }.preference-section { margin-bottom: 25px; }.preference-section h2 { margin: 0 0 11px; font-family: "DM Sans", sans-serif; font-size: 14px; letter-spacing: 0; }.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }.preference-chip { padding: 9px 12px; border: 1px solid rgba(39, 78, 56, .12); border-radius: 99px; background: rgba(255,255,255,.75); color: #55675c; font-size: 12px; transition: .2s; }.preference-chip.selected { border-color: #4c966f; background: #e7f4e7; color: #236947; font-weight: 700; }.safety-note { margin: -7px 0 19px; padding: 11px 12px; border-radius: 12px; background: #fff3e9; color: #86634d; font-size: 11px; line-height: 1.4; }.privacy-card { display: grid; grid-template-columns: 43px 1fr; gap: 13px; margin-bottom: 23px; padding: 18px; border-radius: 21px; background: linear-gradient(135deg, #1b4d37, #286849); color: white; box-shadow: 0 14px 27px rgba(24, 74, 51, .18); }.privacy-lock { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: rgba(255,255,255,.13); color: #bcdfc3; font-size: 23px; }.privacy-card .small-label { color: #b2d8b8; }.privacy-card h2 { margin: 5px 0; font-size: 18px; }.privacy-card p:last-child { margin: 0; color: #d5ead8; font-size: 12px; line-height: 1.35; }.secondary-action { width: 100%; margin: 1px 0 12px; padding: 13px; border: 1px solid #e2b9aa; border-radius: 15px; background: #fff8f4; color: #a35f4c; font-size: 13px; font-weight: 700; }
.form-section { margin-bottom: 27px; }.form-section h2 { margin: 0 0 6px; font-family: "DM Sans", sans-serif; font-size: 15px; letter-spacing: 0; }.form-section h2 em { color: var(--muted); font-size: 11px; font-style: normal; font-weight: 400; }.section-help { margin: 0 0 13px; color: var(--muted); font-size: 12px; line-height: 1.4; }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.input-field { min-width: 0; }.input-field.full { grid-column: 1 / -1; }.input-field > span:first-child { display: block; min-height: 30px; color: #435a4c; font-size: 11px; font-weight: 700; line-height: 1.25; }.input-field em { color: var(--muted); font-style: normal; font-weight: 400; }.input-field input, .input-field select { width: 100%; height: 44px; padding: 0 11px; border: 1px solid rgba(39, 78, 56, .13); border-radius: 13px; outline-color: #74ae88; background: rgba(255,255,255,.78); color: var(--ink); font-size: 13px; }.input-field input::placeholder { color: #a3aaa3; }.number-input { display: flex; align-items: center; height: 44px; overflow: hidden; border: 1px solid rgba(39, 78, 56, .13); border-radius: 13px; background: rgba(255,255,255,.78); }.number-input input { min-width: 0; height: 42px; border: 0; border-radius: 0; background: transparent; }.number-input b { padding: 0 10px 0 2px; color: #6d8173; font-size: 11px; }.data-note { display: grid; grid-template-columns: 27px 1fr; gap: 9px; margin: 3px 0 19px; padding: 13px; border: 1px solid rgba(59, 119, 84, .12); border-radius: 15px; background: #edf7ec; color: #42674e; }.data-note > span { font-size: 19px; }.data-note p { margin: 0; font-size: 11px; line-height: 1.45; }.data-note strong { color: #285d3e; }
.check-section { display: grid; gap: 9px; margin: 0 0 20px; padding: 0; border: 0; }.check-section legend { margin-bottom: 4px; font-size: 14px; font-weight: 700; }.check-section .section-help { margin-bottom: 3px; }.check-row { display: grid; grid-template-columns: 19px 1fr; gap: 10px; align-items: start; padding: 13px; border: 1px solid rgba(39, 78, 56, .10); border-radius: 16px; background: rgba(255,255,255,.70); }.check-row input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: #307a58; }.check-row strong, .check-row small { display: block; }.check-row strong { font-size: 12px; line-height: 1.3; }.check-row small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.35; }.safety-gate { display: grid; grid-template-columns: 25px 1fr; gap: 9px; margin: 2px 0 18px; padding: 14px; border: 1px solid #efc095; border-radius: 16px; background: #fff4e8; color: #8c5735; }.safety-gate > span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #e89661; color: white; font-weight: 700; }.safety-gate strong { font-size: 12px; }.safety-gate p { margin: 3px 0 0; font-size: 11px; line-height: 1.4; }.settings-field.diary { margin: 13px 0; }.settings-field.diary > span { color: #3d7658; }
.goal-options { margin-bottom: 14px; }.goal-details { margin: 0 0 19px; padding: 18px; border: 1px solid rgba(45, 105, 74, .14); border-radius: 21px; background: linear-gradient(145deg, rgba(238,248,238,.96), rgba(249,252,246,.94)); box-shadow: 0 12px 26px rgba(39, 93, 61, .06); }.goal-form-panel h2 { margin: 5px 0 12px; font-size: 24px; }.target-weight-field { display: flex; align-items: center; max-width: 200px; height: 68px; overflow: hidden; border: 1px solid rgba(44, 112, 77, .25); border-radius: 18px; background: white; box-shadow: 0 7px 15px rgba(39, 78, 56, .06); }.target-weight-field input { width: 100%; min-width: 0; padding: 0 4px 0 17px; border: 0; outline: 0; color: #205e41; background: transparent; font-family: "Fraunces", Georgia, serif; font-size: 31px; }.target-weight-field b { padding: 0 16px 0 3px; color: #5e7b69; font-size: 13px; }.goal-helper { margin: 12px 0 0; color: #5f786a; font-size: 12px; line-height: 1.45; }.compact-target { max-width: 250px; height: 53px; margin-top: 15px; }.compact-target input { font-family: "DM Sans", sans-serif; font-size: 13px; }.range-fields { display: flex; align-items: end; gap: 8px; }.range-fields > span { padding-bottom: 13px; color: #6d8777; }.range-fields label { flex: 1; }.range-fields label > span { display: block; margin-bottom: 6px; color: #547061; font-size: 11px; font-weight: 700; }.range-fields label { position: relative; }.range-fields input { width: 100%; height: 46px; padding: 0 31px 0 11px; border: 1px solid rgba(44, 112, 77, .20); border-radius: 13px; outline-color: #74ae88; background: white; color: var(--ink); }.range-fields b { position: absolute; right: 10px; bottom: 14px; color: #6c8476; font-size: 10px; }
.preference-agent { position: relative; overflow: hidden; margin: -2px 0 27px; padding: 17px; border: 1px solid rgba(46, 125, 88, .18); border-radius: 22px; background: linear-gradient(135deg, #eef8ef, #e5f4e6); box-shadow: 0 12px 26px rgba(39, 94, 61, .07); }.preference-agent::after { position: absolute; top: -54px; right: -48px; width: 144px; height: 144px; border: 1px solid rgba(53, 133, 91, .16); border-radius: 50%; content: ""; }.agent-title { position: relative; z-index: 1; display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; }.agent-title > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; background: linear-gradient(145deg, #ff9577, #f56a5b); box-shadow: 0 7px 15px rgba(235, 101, 82, .22); color: white; font-size: 18px; }.agent-title h2 { margin: 3px 0 0; font-family: "DM Sans", sans-serif; font-size: 14px; letter-spacing: 0; }.preference-agent > p { position: relative; z-index: 1; margin: 13px 0; color: #547061; font-size: 12px; line-height: 1.45; }.preference-agent textarea { position: relative; z-index: 1; width: 100%; resize: vertical; padding: 12px; border: 1px solid rgba(48, 113, 78, .16); border-radius: 14px; outline-color: #74ae88; background: rgba(255,255,255,.75); color: var(--ink); font-size: 12px; line-height: 1.4; }.agent-action { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; margin-top: 11px; padding: 10px 13px; border: 0; border-radius: 12px; background: #236548; color: white; font-size: 12px; font-weight: 700; box-shadow: 0 7px 14px rgba(33, 95, 65, .18); }.agent-result { position: relative; z-index: 1; margin-top: 12px; padding: 11px; border-radius: 12px; background: rgba(255,255,255,.76); color: #315f49; font-size: 12px; line-height: 1.4; }.agent-result strong { display: block; margin-bottom: 3px; }.agent-privacy { margin-bottom: 0 !important; color: #79917f !important; font-size: 10px !important; }