:root {
  --paper: #f7fafc;
  --paper-deep: #eef3f8;
  --ink: #171a22;
  --muted: #515a6a;
  --green: #103f4a;
  --green-light: #e4f4ef;
  --sage: #8aaaa6;
  --coral: #8f8dcb;
  --blue: #5fa8a6;
  --white: #ffffff;
  --accent: #2d7474;
  --accent-2: #16869a;
  --emerald: #167a5b;
  --cyan: #67b8ad;
  --insight: #557f83;
  --surface: rgba(255,255,255,.86);
  --surface-strong: #ffffff;
  --line: rgba(23, 26, 34, .11);
  --shadow: 0 18px 44px rgba(29, 35, 55, .12);
  --button-shadow: 0 10px 24px rgba(16, 63, 74, .2);
  --action-gradient: linear-gradient(135deg, #103f4a 0%, #167a5b 54%, #16869a 100%);
  --insight-gradient: linear-gradient(135deg, #103f4a 0%, #1c6866 58%, #16869a 100%);
  --soft-gradient: linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,250,252,.9));
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: #dfe5ee;
  background-image:
    linear-gradient(160deg, rgba(255,255,255,.74), rgba(255,255,255,0) 46%),
    linear-gradient(90deg, rgba(23,26,34,.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(23,26,34,.018) 1px, transparent 1px);
  background-size: auto, 34px 34px, 34px 34px;
  color: var(--ink);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select { font: inherit; }
button {
  color: inherit;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease;
}
button:active { transform: translateY(1px) scale(.99); }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid rgba(47, 92, 255, .24);
  outline-offset: 2px;
}

.app-shell {
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(247,250,252,.96) 28%, #edf3f8 100%),
    linear-gradient(90deg, rgba(23,26,34,.018) 1px, transparent 1px),
    linear-gradient(180deg, rgba(23,26,34,.014) 1px, transparent 1px);
  background-size: auto, 26px 26px, 26px 26px;
  position: relative;
  box-shadow: 0 0 80px rgba(26, 31, 45, .16);
}
.topbar { display: grid; grid-template-columns: auto 1fr 42px; align-items: center; gap: 12px; padding: 24px 22px 14px; }
.brand-mark { position: relative; display: grid; place-items: center; width: 42px; height: 42px; overflow: hidden; border-radius: 14px; background: var(--insight-gradient); box-shadow: inset 0 0 0 1px rgba(255,255,255,.32), 0 12px 24px rgba(16,63,74,.2); }
.brand-mark::after { content: ""; position: absolute; inset: 1px; border-radius: 13px; background: linear-gradient(145deg, rgba(255,255,255,.26), transparent 46%); }
.brand-mark::before { content: ""; position: absolute; width: 25px; height: 25px; border: 2px solid rgba(255,255,255,.58); border-radius: 50%; }
.brand-mark i { position: absolute; z-index: 1; width: 9px; height: 23px; border-radius: 100% 0 100% 0; background: #f4fbf8; transform: rotate(38deg); box-shadow: 0 0 0 1px rgba(31,90,73,.05); }
.brand-mark span { position: absolute; z-index: 2; right: 10px; bottom: 9px; width: 8px; height: 8px; border-radius: 50%; background: #ffb166; box-shadow: 0 0 0 2px rgba(23,26,34,.2); }
.life-home-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 66px; height: 40px; padding: 0 11px; border-radius: 999px; background: var(--insight-gradient); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.32), 0 12px 24px rgba(16,63,74,.2); font-size: 12px; font-weight: 850; line-height: 1; text-decoration: none; }
.life-home-button span { font-size: 15px; line-height: 1; }
.life-home-button b { font: inherit; }
.topbar h1 { margin: 2px 0 0; font-size: 22px; line-height: 1.08; font-weight: 780; }
.eyebrow { margin: 0; color: #5d6678; font-size: 10px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
.version-badge { display: inline-block; margin-left: 5px; padding: 3px 6px; border-radius: 7px; color: var(--green); background: rgba(228,244,239,.95); font-size: 7px; letter-spacing: .05em; vertical-align: 1px; }
.eyebrow.pale { color: rgba(255,255,255,.66); }
.menu-button { width: 40px; height: 40px; display: grid; place-content: center; gap: 4px; border: 1px solid rgba(255,255,255,.72); border-radius: 14px; background: var(--surface); box-shadow: 0 8px 20px rgba(29,35,55,.08); cursor: pointer; }
.menu-button span { width: 17px; height: 2px; border-radius: 4px; background: var(--ink); }
.date-row { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 12px 22px 20px; text-align: center; }
.date-center { min-width: 176px; }
.current-date { margin: 3px 0 0; font-size: 15px; font-weight: 600; }
.date-today-button { margin-top: 5px; padding: 5px 9px; border: 1px solid rgba(31,90,73,.14); border-radius: 999px; color: var(--green); background: rgba(255,255,255,.72); font-size: 8px; font-weight: 900; cursor: pointer; }
.icon-button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.5); font-size: 24px; line-height: 1; cursor: pointer; }
html[data-date-scope="past"] .date-row { background: linear-gradient(180deg, rgba(255,243,228,.72), rgba(255,255,255,0)); }
html[data-date-scope="future"] .date-row { background: linear-gradient(180deg, rgba(237,244,255,.72), rgba(255,255,255,0)); }

main { padding-bottom: 188px; }
.view { display: none; animation: rise .32s ease; }
.view.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

.today-capture { display: grid; grid-template-columns: 1.12fr .88fr; gap: 10px; margin: 0 16px 13px; }
.capture-card { min-height: 100px; display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 11px; padding: 14px; border: 1px solid rgba(31,90,73,.15); border-radius: 20px; color: var(--ink); background: rgba(255,255,255,.72); text-align: left; cursor: pointer; box-shadow: 0 8px 24px rgba(45,78,84,.06); }
.capture-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: white; background: var(--green); font-size: 25px; font-weight: 500; }
.capture-copy small,.capture-copy b,.capture-copy em { display: block; }
.capture-copy small { color: rgba(255,255,255,.72); font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.capture-copy b { margin-top: 4px; color: white; font-size: 14px; }
.capture-copy em { margin-top: 4px; color: rgba(255,255,255,.72); font-size: 8px; font-style: normal; line-height: 1.35; }
.capture-action { display: none; }
.food-capture { background: linear-gradient(145deg,#1f5a49,#2d7764); }
.checkin-capture { border-color: rgba(71,107,124,.32); background: linear-gradient(145deg,#dcecf2,#eef7f8); box-shadow: 0 10px 28px rgba(71,107,124,.12); }
.checkin-capture:not(.complete) { border-color: rgba(71,107,124,.42); background: linear-gradient(145deg,#d7edf5,#f2fbfb); box-shadow: 0 12px 28px rgba(71,107,124,.16); }
.checkin-capture .checkin-copy b { font-size: 12px; }
.checkin-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: white; background: #5e91a8; font-weight: 700; }
.checkin-copy small,.checkin-copy b { display: block; }.checkin-copy small { color: #567582; font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.checkin-copy b { margin-top: 3px; font-size: 11px; }
.checkin-action { color: var(--green); font-size: 10px; font-weight: 700; }.checkin-action i { margin-left: 4px; font-size: 17px; font-style: normal; vertical-align: -1px; }
.capture-card.complete { border-color: #d5e2dc; background: #edf3f1; box-shadow: none; opacity: .78; }.capture-card.complete .checkin-mark { background: var(--green); }
.checkin-capture.complete { border-color: rgba(31,90,73,.16); background: linear-gradient(145deg,#e5efe9,#f4f8f6); box-shadow: none; opacity: .86; }
.checkin-capture.complete .checkin-copy small { color: #5d766c; }
.checkin-capture.complete .checkin-action { color: #5d766c; }
.today-priority-card { margin: 0 16px 14px; padding: 20px; border: 1px solid rgba(31,90,73,.14); border-radius: 26px; background: linear-gradient(145deg,#eef6f6,#f8fbfa); box-shadow: 0 10px 26px rgba(45,78,84,.06); }
.priority-heading { display: grid; grid-template-columns: 1fr 52px; align-items: start; gap: 13px; }
.priority-heading h2 { margin: 4px 0 7px; font: 600 25px/1.05 "Newsreader",serif; }
.priority-heading p:last-child { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.wayfinder-mark.tiny { width: 52px; height: 52px; border-radius: 18px; }
.wayfinder-mark.tiny::before { width: 27px; height: 27px; }
.wayfinder-mark.tiny i { width: 10px; height: 23px; }
.wayfinder-mark.tiny span { right: 14px; bottom: 13px; width: 9px; height: 9px; }
.priority-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 15px; }
.priority-item { min-height: 95px; padding: 12px; border: 1px solid rgba(31,90,73,.1); border-radius: 17px; background: rgba(255,255,255,.65); }
.priority-item small,.priority-item b,.priority-item span { display: block; }
.priority-item small { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.priority-item b { margin-top: 6px; font-size: 12px; }
.priority-item span { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.priority-item.main-goal { border-color: rgba(31,90,73,.22); background: #e1eee8; }
.key-focus-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; padding-top: 13px; border-top: 1px solid rgba(31,90,73,.1); }
.key-focus-footer span { color: var(--muted); font-size: 9px; }
.key-focus-footer button { padding: 7px 10px; border: 1px solid rgba(31,90,73,.14); border-radius: 12px; color: var(--green); background: rgba(255,255,255,.72); font-size: 9px; font-weight: 800; cursor: pointer; }
.priority-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(31,90,73,.1); }
.priority-footer span { color: var(--muted); font-size: 9px; line-height: 1.35; }
.priority-footer button { flex: 0 0 auto; padding: 8px 10px; border: 1px solid rgba(31,90,73,.16); border-radius: 14px; color: var(--green); background: rgba(255,255,255,.75); font-size: 9px; font-weight: 800; cursor: pointer; }
.priority-footer em { display: block; margin-top: 2px; color: var(--muted); font-size: 7px; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.today-summary { padding: 9px 21px 18px; }
.section-title.compact { margin-bottom: 10px; }
.today-health-snapshot { padding: 2px 21px 18px; }
.snapshot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.snapshot-grid article { min-height: 86px; padding: 12px; border: 1px solid rgba(31,90,73,.1); border-radius: 17px; background: rgba(255,255,255,.62); }
.snapshot-grid small,.snapshot-grid b,.snapshot-grid span { display: block; }
.snapshot-grid small { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.snapshot-grid b { margin-top: 6px; font-size: 12px; }
.snapshot-grid span { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.summary-tile { min-height: 72px; padding: 12px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.62); text-align: left; cursor: pointer; }
.summary-tile b,.summary-tile span,.summary-tile small { display: block; }.summary-tile b { font-size: 10px; }.summary-tile span { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.35; }.summary-tile small { margin-top: 4px; color: #5c7c89; font-size: 7px; line-height: 1.3; }
.summary-tile.done { background: #e2eee7; }.summary-tile.needed { background: #e5f0f3; }.summary-tile.pending { background: #e8eef1; }.summary-tile.idle { background: #f2f5f5; }.summary-tile.companion { background: #e1edf2; }.summary-tile.focus { background: #edf4f5; }
.summary-tile.context { background: #eaf3f5; }
.overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.bridge-card { width: calc(100% - 42px); display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; margin: 0 21px 18px; padding: 14px; border: 1px solid rgba(71,107,124,.18); border-radius: 20px; color: var(--ink); background: rgba(255,255,255,.62); text-align: left; cursor: pointer; box-shadow: 0 8px 24px rgba(45,78,84,.05); }
.bridge-card:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(45,78,84,.08); }
.bridge-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: #446b7f; background: #dfecef; font-size: 18px; font-weight: 800; }
.bridge-copy small,.bridge-copy b,.bridge-copy em { display: block; }.bridge-copy small { color: #567582; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.bridge-copy b { margin-top: 3px; font-size: 12px; }.bridge-copy em { margin-top: 4px; color: var(--muted); font-size: 9px; font-style: normal; line-height: 1.4; }
.bridge-action { color: var(--green); font-size: 9px; font-weight: 800; white-space: nowrap; }.bridge-action i { margin-left: 3px; font-size: 16px; font-style: normal; vertical-align: -1px; }

.wayfinder-preview-card { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 14px; margin: 0 21px 18px; padding: 18px; border: 1px solid rgba(31,90,73,.14); border-radius: 23px; background: linear-gradient(145deg,#e4f0ef,#f7fbfb); }
.wayfinder-preview-card h3 { margin: 5px 0 7px; font: 600 20px/1.1 "Newsreader",serif; }
.wayfinder-preview-card p { margin: 0; color: #4f6867; font-size: 10px; line-height: 1.55; }
.today-review-bridge { margin: 0 21px 18px; padding: 18px; border: 1px solid rgba(71,107,124,.18); border-radius: 22px; background: linear-gradient(145deg,#e4eff3,#f7fbfb); }
.today-review-bridge h3 { margin: 5px 0 7px; font: 600 20px/1.1 "Newsreader",serif; }
.today-review-bridge p { margin: 0; color: #52666e; font-size: 10px; line-height: 1.55; }
.optional-review-section { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; margin: 18px 21px 0; padding: 16px; border: 1px solid rgba(31,90,73,.12); border-radius: 20px; background: rgba(255,255,255,.55); }
.optional-review-section h3 { margin: 4px 0 5px; font: 600 18px/1.1 "Newsreader",serif; }
.optional-review-section p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.optional-review-section button { padding: 9px 11px; border: 1px solid rgba(31,90,73,.16); border-radius: 14px; color: var(--green); background: rgba(255,255,255,.78); font-size: 9px; font-weight: 800; cursor: pointer; }
.optional-review-section em { display: block; margin-top: 2px; color: var(--muted); font-size: 7px; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

.hero-card { margin: 0 16px; padding: 25px; border-radius: 28px; color: white; background: radial-gradient(circle at 95% 0%, #34735f 0, transparent 38%), var(--green); box-shadow: var(--shadow); }
.hero-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.hero-card h2 { margin: 5px 0 4px; font: 600 29px/1 "Newsreader", serif; }
.hero-copy { max-width: 220px; margin: 0; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.5; }
.hero-log-button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.22); border-radius: 16px; color: var(--green); background: rgba(255,255,255,.9); font-size: 10px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.hero-log-button span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: white; background: var(--green); font-size: 14px; }
.calorie-ring { flex: 0 0 104px; width: 104px; height: 104px; display: grid; place-content: center; text-align: center; border-radius: 50%; background: radial-gradient(circle, var(--green) 61%, transparent 63%), conic-gradient(#86bad0 57%, rgba(255,255,255,.14) 0); }
.calorie-ring span { font: 600 25px/1 "Newsreader", serif; }
.calorie-ring small { display: block; margin-top: 4px; color: rgba(255,255,255,.65); font-size: 9px; }
.macro-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; margin-top: 25px; }
.macro-grid div { min-width: 0; }
.macro-grid span, .macro-grid small { display: block; }
.macro-grid span { font-weight: 700; }
.macro-grid small { margin-top: 2px; color: rgba(255,255,255,.62); font-size: 9px; }
.macro-grid i { position: relative; display: block; height: 3px; margin-top: 8px; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.14); }
.macro-grid i::after { content: ""; display: block; width: var(--fill); height: 100%; border-radius: inherit; background: #86bad0; }
.nutrition-key-insights { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.nutrition-key-insights article { padding: 11px; border-radius: 15px; background: rgba(255,255,255,.12); }
.nutrition-key-insights b,.nutrition-key-insights span { display: block; }
.nutrition-key-insights b { color: rgba(255,255,255,.82); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.nutrition-key-insights span { margin-top: 5px; color: rgba(255,255,255,.72); font-size: 9px; line-height: 1.45; }
.macro-safety-card { margin-top: 10px; border-radius: 16px; background: rgba(255,255,255,.1); overflow: hidden; }
.macro-safety-card summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px; cursor: pointer; list-style: none; }
.macro-safety-card summary::-webkit-details-marker { display: none; }
.macro-safety-card summary span { font-size: 10px; font-weight: 800; }
.macro-safety-card summary em { color: rgba(255,255,255,.68); font-size: 8px; font-style: normal; text-transform: uppercase; letter-spacing: .07em; }
.macro-safety-card p { margin: 0 11px 10px; color: rgba(255,255,255,.68); font-size: 8px; line-height: 1.4; }
.macro-target-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; padding: 0 11px 11px; }
.macro-target-grid label { color: rgba(255,255,255,.76); font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.macro-target-grid input { width: 100%; margin-top: 4px; padding: 8px 7px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; color: white; background: rgba(255,255,255,.12); font-size: 10px; outline: none; }
.macro-safety-warning { margin: 0 11px 11px; padding: 10px; border-radius: 13px; color: #fff4dd; background: rgba(122,75,30,.34); }
.macro-safety-warning b,.macro-safety-warning span { display: block; }
.macro-safety-warning b { font-size: 9px; }
.macro-safety-warning span { margin-top: 4px; font-size: 8px; line-height: 1.4; }
.macro-safety-card button { width: calc(100% - 22px); margin: 0 11px 11px; color: var(--green); background: rgba(255,255,255,.9); }
.nutrition-expand { margin-top: 10px; border-radius: 16px; background: rgba(255,255,255,.1); overflow: hidden; }
.nutrition-expand summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px; cursor: pointer; list-style: none; }
.nutrition-expand summary::-webkit-details-marker { display: none; }
.nutrition-expand summary span { font-size: 10px; font-weight: 800; }
.nutrition-expand summary em { color: rgba(255,255,255,.68); font-size: 8px; font-style: normal; text-transform: uppercase; letter-spacing: .07em; }
.nutrition-expand[open] summary em { font-size: 0; }
.nutrition-expand[open] summary em::after { content: "Hide"; font-size: 8px; }
.nutrient-color-note { margin: 0 11px 10px; color: rgba(255,255,255,.68); font-size: 8px; line-height: 1.35; }
.nutrition-expand .coverage-grid { padding: 0 11px 11px; }
.nutrition-expand .coverage-item { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.14); }
.nutrition-expand .coverage-item small { color: rgba(255,255,255,.62); }
.nutrition-expand .coverage-item.met { background: rgba(220,233,223,.18); }
.nutrition-expand .coverage-item.close { background: rgba(113,166,194,.18); }
.nutrition-expand .coverage-item.low { background: rgba(255,255,255,.1); }
.nutrition-expand .coverage-item.missing { border-style: dashed; background: rgba(255,255,255,.06); }

.quick-section, .day-log-section, .coverage-section { padding: 30px 21px 0; }
.section-title { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.section-title h2, .page-heading h2 { margin: 3px 0 0; font: 600 25px/1.1 "Newsreader", serif; }
.text-button { padding: 6px 0; border: 0; color: var(--green); background: none; font-size: 12px; font-weight: 700; cursor: pointer; }
.quick-log { display: grid; grid-template-columns: repeat(4, minmax(118px,1fr)); gap: 10px; overflow-x: auto; scrollbar-width: none; }
.quick-log::-webkit-scrollbar { display: none; }
.carousel-dots { display: flex; justify-content: center; gap: 5px; margin-top: 10px; }
.carousel-dots span { width: 6px; height: 6px; border-radius: 999px; background: #cbd9d8; }
.carousel-dots span.active { width: 16px; background: #5d8d91; }
.quick-card { min-width: 0; padding: 15px 11px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.64); text-align: left; cursor: pointer; transition: .18s ease; }
.quick-card:hover { transform: translateY(-2px); border-color: rgba(31,90,73,.28); box-shadow: 0 10px 25px rgba(33,53,47,.07); }
.quick-card.recommended { border-color: rgba(113,166,194,.45); background: linear-gradient(145deg,#e2f0f4,#f7fbfb); box-shadow: 0 8px 20px rgba(71,107,124,.1); }
.food-emoji { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 10px; border-radius: 13px; background: var(--green-light); font-size: 20px; }
.food-photo-thumb { display: grid; place-items: center; width: 42px; height: 42px; overflow: hidden; border-radius: 14px; background: #e8f1ed; }
.food-photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.quick-card .food-photo-thumb { width: 38px; height: 38px; margin-bottom: 10px; border-radius: 13px; }
.log-entry .food-photo-thumb { width: 42px; height: 42px; }
.library-card .food-photo-thumb { width: 50px; height: 50px; border-radius: 16px; }
.quick-card b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.quick-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.recommendation-note { display: block; margin-top: 7px; padding: 5px 7px; border-radius: 9px; color: #456b7e; background: rgba(255,255,255,.7); font-size: 8px; font-style: normal; font-weight: 800; line-height: 1.25; }
.again-label { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; color: var(--green); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.again-label span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: white; background: var(--green); font-size: 15px; }

.add-button { padding: 8px 12px; border: 0; border-radius: 20px; color: var(--green); background: var(--green-light); font-size: 11px; font-weight: 700; cursor: pointer; }
.day-log { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.65); }
.empty-day-note { margin: -4px 0 10px; padding: 11px 12px; border: 1px solid rgba(140,91,37,.14); border-radius: 15px; color: #6f4a18; background: #fff3e4; font-size: 9px; line-height: 1.45; }
.log-entry { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line); }
.log-entry:last-child { border-bottom: 0; }
.log-entry .food-emoji { width: 42px; height: 42px; margin: 0; }
.log-entry h3 { margin: 0; font-size: 13px; }
.entry-actions { grid-column: 2 / -1; display: flex; justify-content: flex-end; gap: 6px; }
.entry-actions button { min-height: 30px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--green); background: #fff; font-size: 9px; font-weight: 850; }
.entry-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; color: var(--muted); font-size: 9px; }
.source-badge { padding: 3px 6px; border-radius: 6px; color: #466656; background: #e3eee5; font-size: 8px; font-weight: 700; }
.source-badge.estimated { color: #4c6d7e; background: #dfecef; }
.entry-nutrition { text-align: right; }
.entry-nutrition b, .entry-nutrition small { display: block; }
.entry-nutrition b { font-size: 13px; }
.entry-nutrition small { margin-top: 3px; color: var(--muted); font-size: 9px; }

.insight-card { display: grid; grid-template-columns: 42px 1fr; gap: 12px; margin: 30px 21px 0; padding: 20px; border-radius: 22px; background: #dfecef; }
.insight-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #41677b; background: #eff6f7; font-size: 20px; }
.insight-card h3 { margin: 5px 0 7px; font: 600 19px/1.1 "Newsreader", serif; }
.insight-card p:last-child { margin: 0; color: #52666e; font-size: 11px; line-height: 1.55; }
.coverage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.coverage-item { display: grid; grid-template-columns: 10px 1fr; align-items: center; gap: 9px; padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.5); }
.coverage-item b, .coverage-item small { display: block; }
.coverage-item b { font-size: 11px; }
.coverage-item small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot.excellent { background: var(--green); }.dot.good { background: var(--blue); }.dot.low { background: #7592a0; }.dot.missing { border: 1px solid rgba(255,255,255,.65); background: transparent; }
.page-heading { padding: 20px 22px 22px; }
.page-heading h2 { margin-top: 6px; font-size: 34px; }
.page-heading > p:not(.eyebrow) { margin: 10px 0 0; max-width: 400px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.inline-back-button { margin-top: 13px; padding: 8px 11px; border: 1px solid rgba(31,90,73,.15); border-radius: 14px; color: var(--green); background: rgba(255,255,255,.62); font-size: 10px; font-weight: 800; cursor: pointer; }
.search-box { display: flex; align-items: center; gap: 10px; margin: 0 21px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.7); }
.search-box input { width: 100%; border: 0; outline: none; background: transparent; font-size: 12px; }
.filter-row { display: flex; gap: 8px; padding: 14px 21px 18px; overflow-x: auto; }
.chip { padding: 8px 13px; border: 1px solid var(--line); border-radius: 20px; background: transparent; font-size: 10px; font-weight: 600; white-space: nowrap; }
.chip.active { color: white; background: var(--green); }
.meal-library { display: grid; gap: 11px; padding: 0 21px; }
.library-card { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 13px; padding: 15px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.62); }
.library-card .food-emoji { width: 50px; height: 50px; margin: 0; border-radius: 16px; }
.library-card h3 { margin: 0; font-size: 13px; }
.library-card p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.library-card button { width: 34px; height: 34px; border: 0; border-radius: 50%; color: white; background: var(--green); font-size: 20px; cursor: pointer; }
.weekly-card { margin: 0 21px; padding: 23px; border-radius: 26px; color: white; background: var(--green); }
.weekly-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.weekly-heading h3 { margin: 5px 0 0; font: 600 22px/1.1 "Newsreader", serif; }
.weekly-heading strong { font: 600 32px/1 "Newsreader", serif; text-align: right; }
.weekly-heading strong small { display: block; margin-top: 5px; color: rgba(255,255,255,.6); font: 400 8px/1.15 "DM Sans", sans-serif; }
.pattern-explain-button { margin-top: 10px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: white; background: rgba(255,255,255,.1); font-size: 8px; font-weight: 800; cursor: pointer; }
.bar-chart { display: flex; align-items: end; justify-content: space-between; height: 110px; margin-top: 24px; border-bottom: 1px solid rgba(255,255,255,.2); }
.bar-chart i { width: 8%; height: var(--h); border-radius: 6px 6px 0 0; background: rgba(255,255,255,.35); }
.chart-days { display: flex; justify-content: space-between; padding-top: 8px; color: rgba(255,255,255,.55); font-size: 8px; }
.chart-days span { width: 8%; text-align: center; }
.chart-days.area-days span { width: 24%; }
.chart-days.three-areas span { width: 32%; }
.pattern-list { display: grid; gap: 12px; padding: 22px 21px; }
.pattern-list article { display: grid; grid-template-columns: 40px 1fr; gap: 13px; padding: 17px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.55); }
.pattern-symbol { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; font-weight: 700; }
.pattern-symbol.strong { color: var(--green); background: var(--green-light); }.pattern-symbol.watch { color: #496c7d; background: #dfecef; }.pattern-symbol.low { color: #526e7b; background: #dce6ea; }
.pattern-list h3 { margin: 4px 0 5px; font: 600 18px/1.1 "Newsreader", serif; }
.pattern-list article div > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.pattern-list article p:last-child { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.text-link-button { margin-top: 10px; padding: 0; border: 0; color: var(--green); background: none; font-size: 10px; font-weight: 800; cursor: pointer; }
.inline-reasoning { margin-top: 9px; }
.inline-reasoning summary { color: var(--green); font-size: 10px; font-weight: 800; cursor: pointer; list-style: none; }
.inline-reasoning summary::-webkit-details-marker { display: none; }
.inline-reasoning summary::after { content: " ›"; }
.inline-reasoning[open] summary::after { content: "⌄"; margin-left: 4px; }
.inline-reasoning p { margin-top: 7px !important; }
.review-records-link { margin: 0 21px 26px; padding: 16px; border: 1px solid rgba(71,107,124,.16); border-radius: 20px; background: #e7f1f4; }
.review-records-link h3 { margin: 4px 0 6px; font: 600 18px/1.1 "Newsreader",serif; }
.review-records-link p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.review-records-link button { width: 100%; margin-top: 12px; padding: 11px; border: 0; border-radius: 14px; color: white; background: #456b7e; font-size: 10px; font-weight: 800; cursor: pointer; }
.review-range { padding: 0 21px 14px; }
.review-range-status { margin: -6px 21px 14px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.review-goals-card { margin: 0 21px 16px; padding: 18px; border: 1px solid rgba(31,90,73,.14); border-radius: 22px; background: #e7f1ed; }
.review-goals-card h2 { font-size: 22px; }
.review-goal-list { display: grid; gap: 8px; }
.review-goal-list article { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.68); }
.review-goal-list article > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; color: white; background: var(--green); font-size: 9px; font-weight: 800; }
.review-goal-list b,.review-goal-list small { display: block; }
.review-goal-list b { font-size: 10px; }
.review-goal-list small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.review-goal-list em { color: var(--green); font-size: 8px; font-style: normal; font-weight: 800; }
.review-week-summary { margin: 0 21px 17px; padding: 18px; border: 1px solid rgba(71,107,124,.15); border-radius: 22px; background: #edf4f5; }
.review-week-summary h2 { font-size: 22px; }
.review-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.review-summary-grid article { min-height: 86px; padding: 11px; border-radius: 14px; background: rgba(255,255,255,.7); }
.review-summary-grid small,.review-summary-grid b,.review-summary-grid span { display: block; }
.review-summary-grid small { color: #567582; font-size: 7px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.review-summary-grid b { margin-top: 5px; font-size: 10px; line-height: 1.35; }
.review-summary-grid span { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.review-decisions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.review-decisions article { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 9px; padding: 10px; border-radius: 14px; background: #dfecef; }
.review-decision-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #456b7e; background: white; font-size: 12px; font-weight: 800; }
.review-decisions small,.review-decisions b,.review-decisions em { display: block; }
.review-decisions small { color: #567582; font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.review-decisions b { margin-top: 3px; font-size: 9px; line-height: 1.3; }
.review-decisions em { margin-top: 3px; color: var(--muted); font-size: 7px; font-style: normal; }
.review-subheading { padding: 4px 21px 12px; }
.review-subheading h2 { margin: 4px 0 5px; font: 600 23px/1.1 "Newsreader",serif; }
.review-subheading p:last-child { margin: 0; color: var(--muted); font-size: 9px; }
.review-purpose-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; padding: 14px 21px 0; }
.review-purpose-grid article { min-height: 120px; padding: 13px; border: 1px solid rgba(71,107,124,.16); border-radius: 17px; background: rgba(255,255,255,.62); }
.review-purpose-grid small,.review-purpose-grid b,.review-purpose-grid span { display: block; }
.review-purpose-grid small { color: #567582; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.review-purpose-grid b { margin-top: 7px; font-size: 11px; line-height: 1.35; }
.review-purpose-grid span { margin-top: 6px; color: var(--muted); font-size: 8px; line-height: 1.4; }

.companion-research-card { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 15px; margin: 14px 21px 0; padding: 18px; border: 1px solid rgba(31,90,73,.14); border-radius: 22px; background: #e4f0ef; }
.companion-research-card h3 { margin: 5px 0 6px; font: 600 20px/1.1 "Newsreader",serif; }
.companion-research-card p:last-child { margin: 0; color: #4f6867; font-size: 10px; line-height: 1.55; }
.wayfinder-mark { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 20px; background: radial-gradient(circle at 65% 34%, #c9e4e3 0 16%, transparent 17%), linear-gradient(145deg,#dbecef,#f8fbfb); box-shadow: inset 0 0 0 1px rgba(31,90,73,.08); }
.wayfinder-mark::before { content: ""; width: 30px; height: 30px; border: 2px solid #416f78; border-radius: 50%; opacity: .75; }
.wayfinder-mark i { position: absolute; width: 11px; height: 25px; border-radius: 100% 0 100% 0; background: #2f6959; transform: rotate(38deg); }
.wayfinder-mark span { position: absolute; right: 15px; bottom: 14px; width: 10px; height: 10px; border-radius: 50%; background: #77abc1; }
.wayfinder-mark.large { width: 70px; height: 70px; border-radius: 24px; }
.wayfinder-mark.large::before { width: 38px; height: 38px; }
.wayfinder-mark.large i { width: 13px; height: 32px; }
.wayfinder-mark.large span { right: 18px; bottom: 17px; width: 12px; height: 12px; }

.wayfinder-system-card { margin: 14px 21px 0; padding: 18px; border: 1px solid rgba(31,90,73,.12); border-radius: 22px; background: rgba(255,255,255,.58); }
.wayfinder-system-card .section-title { align-items: start; }
.wayfinder-system-card h2 { font-size: 22px; }
.visible-options { margin-top: 12px; }
.voice-examples { display: grid; gap: 8px; margin-top: 13px; }
.voice-examples article { display: grid; grid-template-columns: 44px 1fr; gap: 9px; align-items: start; padding: 10px; border-radius: 14px; background: #eaf2f3; }
.voice-examples b { color: var(--green); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.voice-examples span { color: var(--muted); font-size: 9px; line-height: 1.45; }

.category-stack { display: grid; gap: 12px; padding: 0 21px 24px; }
.health-records-stack { padding-top: 24px; }
.health-page-heading { padding-bottom: 14px; }
.health-trend-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin-top: 14px; }
.health-trend-strip article { min-height: 54px; padding: 9px; border: 1px solid rgba(71,107,124,.14); border-radius: 14px; background: rgba(255,255,255,.58); }
.health-trend-strip small,.health-trend-strip b { display: block; }
.health-trend-strip small { color: #567582; font-size: 7px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.health-trend-strip b { margin-top: 5px; font-size: 9px; line-height: 1.25; }
.health-tab-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; margin-top: 13px; padding: 5px; border: 1px solid rgba(71,107,124,.14); border-radius: 16px; background: rgba(255,255,255,.58); }
.health-tab-row button { min-height: 34px; border: 0; border-radius: 12px; color: #567582; background: transparent; font-size: 8px; font-weight: 900; cursor: pointer; }
.health-tab-row button.selected { color: white; background: linear-gradient(135deg,#103f4a,#16869a); box-shadow: 0 8px 18px rgba(16,63,74,.12); }
.surface-hidden { display: none !important; }
.health-overview-card { margin: 0 21px 14px; padding: 18px; border: 1px solid rgba(31,90,73,.14); border-radius: 22px; background: #edf6f5; }
.health-overview-card h2 { font-size: 22px; }
.health-actions-card { display: grid; grid-template-columns: 1.15fr .85fr .85fr; gap: 9px; margin: 0 21px 14px; }
.health-actions-card button { min-height: 76px; padding: 11px; border: 1px solid rgba(31,90,73,.14); border-radius: 17px; text-align: left; cursor: pointer; }
.health-action-main { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 9px; color: white; background: var(--green); }
.health-action-main span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; color: var(--green); background: white; font-size: 18px; }
.health-action-main b,.health-action-main small,.health-action-secondary b,.health-action-secondary small { display: block; }
.health-action-main b { font-size: 11px; }
.health-action-main small { margin-top: 3px; color: rgba(255,255,255,.72); font-size: 8px; }
.health-action-secondary { color: var(--ink); background: rgba(255,255,255,.68); }
.health-action-secondary b { font-size: 10px; }
.health-action-secondary small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.health-signal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.health-signal-grid article { padding: 12px; border-radius: 16px; background: rgba(255,255,255,.68); }
.health-signal-grid small,.health-signal-grid b,.health-signal-grid span { display: block; }
.health-signal-grid small { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.health-signal-grid b { margin-top: 5px; font-size: 11px; }
.health-signal-grid span { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.tips-row { display: grid; gap: 8px; margin-top: 12px; }
.tips-row article { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 10px; border-radius: 14px; background: #e0ecee; }
.tips-row b { color: #41677b; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.tips-row span { color: #52666e; font-size: 9px; line-height: 1.45; }
.category-card,.urgent-card { padding: 18px; border: 1px solid var(--line); border-radius: 21px; background: rgba(255,255,255,.62); }
.category-card.live { border-color: rgba(31,90,73,.24); background: #e4f0e8; }.category-card.lowkey { background: #edf3f4; }
.category-card.money-card-main { border-color: rgba(71,107,124,.22); background: #e3eef3; }
.category-card h3,.urgent-card h3 { margin: 5px 0 7px; font: 600 21px/1.1 "Newsreader",serif; }
.category-card p:last-child,.category-card p,.urgent-card p { color: var(--muted); font-size: 10px; line-height: 1.55; }
.pill-row,.med-row,.urgent-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.pill-row button,.med-button,.urgent-actions button,.doctor-button { padding: 8px 10px; border: 1px solid rgba(31,90,73,.15); border-radius: 14px; color: var(--green); background: rgba(255,255,255,.72); font-size: 9px; font-weight: 700; cursor: pointer; }
.med-button.selected,.health-action-secondary.selected { color: white; background: var(--green); }
.med-schedule-card { border-color: rgba(31,90,73,.18); background: linear-gradient(145deg,#edf6f3,#f9fcfb); }
.med-schedule-heading { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12px; }
.med-schedule-heading h3 { margin-bottom: 6px; }
.med-schedule-heading p { margin: 0; }
.med-heading-actions { display: grid; gap: 6px; }
.med-schedule-heading button { padding: 8px 10px; border: 1px solid rgba(31,90,73,.15); border-radius: 13px; color: var(--green); background: rgba(255,255,255,.74); font-size: 8px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.med-heading-actions button:first-child { color: #456b7e; background: #e6f0f3; border-color: rgba(71,107,124,.2); }
.dose-progress-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.dose-progress-row span { padding: 11px; border-radius: 15px; background: rgba(255,255,255,.72); }
.dose-progress-row b,.dose-progress-row small { display: block; }
.dose-progress-row b { color: var(--green); font: 600 22px/1 "Newsreader",serif; }
.dose-progress-row small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.35; text-transform: uppercase; letter-spacing: .06em; }
.med-dose-list { display: grid; gap: 8px; margin-top: 12px; }
.med-dose-item { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; padding: 10px; border: 1px solid rgba(31,90,73,.11); border-radius: 16px; background: rgba(255,255,255,.72); transition: .18s ease; }
.med-dose-item.taken { border-color: rgba(31,90,73,.2); background: #e2eee7; }
.med-dose-item.due { background: #f5f9f9; }
.med-dose-toggle { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(31,90,73,.18); border-radius: 12px; color: #5c7c89; background: white; font-size: 16px; font-weight: 900; cursor: pointer; }
.med-dose-item.taken .med-dose-toggle { color: white; background: var(--green); }
.med-dose-item b,.med-dose-item small,.med-dose-item em { display: block; }
.med-dose-item b { font-size: 11px; }
.med-dose-item small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.med-dose-item em { margin-top: 3px; color: #567582; font-size: 8px; font-style: normal; }
.med-prompt-toggle { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin-top: 12px; padding: 11px; border: 1px solid rgba(31,90,73,.14); border-radius: 15px; color: var(--green); background: rgba(255,255,255,.72); text-align: left; cursor: pointer; }
.med-prompt-toggle b,.med-prompt-toggle small { display: block; }
.med-prompt-toggle b { font-size: 10px; }
.med-prompt-toggle small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.med-prompt-toggle i { display: grid; place-items: center; min-width: 38px; min-height: 26px; padding: 0 9px; border-radius: 999px; color: #567582; background: #edf4f5; font-size: 8px; font-style: normal; font-weight: 900; text-transform: uppercase; }
.med-prompt-toggle.selected { border-color: rgba(31,90,73,.28); background: #e2eee7; }
.med-prompt-toggle.selected i { color: white; background: var(--green); }
.med-tip-card { display: grid; grid-template-columns: 30px 1fr; gap: 9px; margin-top: 12px; padding: 11px; border-radius: 15px; background: #dfecef; }
.med-tip-card b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #41677b; background: white; font-size: 0; }
.med-tip-card b::before { content: "i"; font-size: 11px; font-weight: 900; }
.med-tip-card span { color: #52666e; font-size: 9px; line-height: 1.45; }
.water-card { border-color: rgba(22,134,154,.16); background: linear-gradient(145deg,#e7f3f1,#f8fbfa); }
.water-heading { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12px; }
.water-heading h3 { margin-bottom: 6px; }
.water-heading p { margin: 0; }
.water-heading strong { min-width: 72px; padding: 11px 10px; border-radius: 17px; color: white; background: var(--action-gradient); font: 800 18px/1 "DM Sans",sans-serif; text-align: center; box-shadow: 0 10px 24px rgba(16,63,74,.12); }
.water-progress { height: 9px; margin-top: 14px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.78); box-shadow: inset 0 0 0 1px rgba(31,90,73,.08); }
.water-progress span { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#103f4a,#67b8ad); transition: width .18s ease; }
.water-card > small { display: block; margin-top: 8px; color: #567582; font-size: 9px; font-weight: 800; }
.water-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 13px; }
.water-actions button { min-height: 38px; padding: 9px 8px; border: 1px solid rgba(22,134,154,.16); border-radius: 13px; color: var(--accent-2); background: rgba(255,255,255,.78); font-size: 9px; font-weight: 900; cursor: pointer; }
.water-actions button:hover { transform: translateY(-1px); border-color: rgba(22,134,154,.28); box-shadow: 0 8px 18px rgba(29,35,55,.07); }
.activity-summary-tile { background: #f1f4ec; }
.activity-card { border-color: rgba(31,90,73,.16); background: linear-gradient(145deg,#edf6ed,#fbfaf5); }
.activity-heading { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12px; }
.activity-heading h3 { margin-bottom: 6px; }
.activity-heading p { margin: 0; }
.activity-heading strong { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 24px; color: white; background: linear-gradient(145deg,#1f6f58,#c98118); box-shadow: 0 14px 28px rgba(31,90,73,.14); }
.activity-heading strong span,.activity-heading strong small { display: block; text-align: center; }
.activity-heading strong span { font: 700 27px/1 "Newsreader",serif; }
.activity-heading strong small { margin-top: 4px; font-size: 7px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.activity-stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin-top: 13px; }
.activity-stat-grid span { min-height: 58px; padding: 9px; border: 1px solid rgba(31,90,73,.08); border-radius: 14px; background: rgba(255,255,255,.72); }
.activity-stat-grid b,.activity-stat-grid small { display: block; }
.activity-stat-grid b { color: #315f48; font-size: 10px; line-height: 1.25; }
.activity-stat-grid small { margin-top: 5px; color: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.activity-meter { height: 8px; margin-top: 13px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.82); box-shadow: inset 0 0 0 1px rgba(31,90,73,.08); }
.activity-meter span { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#1f6f58,#ffb166); transition: width .18s ease; }
.activity-card > p { margin: 9px 0 0; color: #52666e; font-size: 9px; line-height: 1.45; }
.activity-quick-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 13px; }
.activity-quick-grid button { min-height: 58px; padding: 10px; border: 1px solid rgba(31,90,73,.13); border-radius: 14px; color: var(--ink); background: rgba(255,255,255,.76); text-align: left; cursor: pointer; }
.activity-quick-grid button:first-child { color: white; border-color: transparent; background: linear-gradient(135deg,#1f6f58,#16869a); }
.activity-quick-grid b,.activity-quick-grid small { display: block; }
.activity-quick-grid b { font-size: 10px; line-height: 1.2; }
.activity-quick-grid small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.activity-quick-grid button:first-child small { color: rgba(255,255,255,.76); }
.activity-log { display: grid; gap: 7px; margin-top: 12px; }
.activity-entry { display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 9px; padding: 9px; border-radius: 14px; background: rgba(255,255,255,.72); }
.activity-entry > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 11px; color: white; background: #1f6f58; font-size: 9px; font-weight: 900; }
.activity-entry b,.activity-entry small { display: block; }
.activity-entry b { font-size: 10px; }
.activity-entry small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.activity-entry em { min-width: 30px; padding: 6px 7px; border-radius: 999px; color: #8a4c11; background: #fff2dc; font-size: 8px; font-style: normal; font-weight: 900; text-align: center; }
.activity-reset { width: 100%; margin-top: 8px; padding: 9px 10px; border: 1px solid rgba(71,107,124,.14); border-radius: 13px; color: #456b7e; background: rgba(255,255,255,.72); font-size: 8px; font-weight: 900; cursor: pointer; }
.activity-score-note { margin-top: 11px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.62); }
.activity-score-note summary { color: #315f48; font-size: 8px; font-weight: 900; cursor: pointer; }
.activity-score-note p { margin: 8px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.movement-support-card { border-color: rgba(71,107,124,.15); background: linear-gradient(145deg,#f6faf8,#eef6f4); }
.movement-support-heading { display: grid; grid-template-columns: 1fr minmax(122px,156px); align-items: start; gap: 10px; }
.movement-support-heading h3 { margin-bottom: 6px; }
.movement-support-heading p { margin: 0; }
.movement-support-heading select { width: 100%; padding: 9px; border: 1px solid rgba(71,107,124,.18); border-radius: 12px; color: #315f48; background: white; font-size: 9px; font-weight: 800; }
.movement-support-list,.movement-routine-list { display: grid; gap: 8px; margin-top: 12px; }
.movement-support-list article,.movement-routine-item { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 7px; padding: 9px; border-radius: 14px; background: rgba(255,255,255,.72); }
.movement-support-list b,.movement-support-list span,.movement-routine-item b,.movement-routine-item small { display: block; }
.movement-support-list b,.movement-routine-item b { font-size: 10px; }
.movement-support-list span,.movement-routine-item small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.movement-support-list button,.movement-routine-item button,.movement-custom-row button,.fitness-lane-body button,.fitness-lane-panel button,.macro-safety-card button { min-height: 32px; padding: 8px 9px; border: 1px solid rgba(31,90,73,.14); border-radius: 11px; color: var(--green); background: rgba(255,255,255,.82); font-size: 8px; font-weight: 900; cursor: pointer; }
.movement-support-list button:first-of-type,.movement-routine-item button:first-of-type { color: white; border-color: transparent; background: #1f6f58; }
.movement-custom-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.movement-routine-item { grid-template-columns: 36px 1fr auto auto; }
.movement-routine-item img,.movement-routine-item > span { width: 36px; height: 36px; border-radius: 12px; }
.movement-routine-item img { object-fit: cover; }
.movement-routine-item > span { display: grid; place-items: center; color: white; background: #456b7e; font-size: 11px; font-weight: 900; }
.movement-timer-panel { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin-top: 12px; padding: 10px; border-radius: 15px; color: white; background: linear-gradient(135deg,#103f4a,#16869a); }
.movement-timer-panel b,.movement-timer-panel span { display: block; }
.movement-timer-panel b { font-size: 10px; }
.movement-timer-panel span { margin-top: 2px; font: 600 22px/1 "Newsreader",serif; }
.movement-timer-panel button { padding: 8px 10px; border: 1px solid rgba(255,255,255,.28); border-radius: 11px; color: white; background: rgba(255,255,255,.14); font-size: 8px; font-weight: 900; cursor: pointer; }
.fitness-lane-panel { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin-top: 13px; padding: 11px; border-radius: 15px; background: rgba(255,255,255,.66); }
.fitness-lane-panel h3 { margin: 3px 0 4px; font: 600 18px/1.1 "Newsreader",serif; }
.fitness-lane-panel p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.fitness-lane-panel button.selected { color: white; border-color: transparent; background: #456b7e; }
.fitness-lane-body { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin-top: 9px; }
.cross-app-log-card { border-color: rgba(22,134,154,.16); background: linear-gradient(145deg,#edf7f4,#f8fbfa); }
.cross-app-log-heading { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12px; }
.cross-app-log-heading h3 { margin-bottom: 6px; }
.cross-app-log-heading p { margin: 0; }
.cross-app-log-heading > span { padding: 7px 9px; border-radius: 999px; color: #2f6757; background: #e0efe8; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.cross-app-log-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.cross-app-log-grid button { min-height: 68px; padding: 11px; border: 1px solid rgba(31,90,73,.13); border-radius: 15px; color: var(--ink); background: rgba(255,255,255,.78); text-align: left; cursor: pointer; }
.cross-app-log-grid button:first-child { color: white; border-color: transparent; background: var(--action-gradient); box-shadow: var(--button-shadow); }
.cross-app-log-grid b,.cross-app-log-grid small { display: block; }
.cross-app-log-grid b { font-size: 10px; line-height: 1.2; }
.cross-app-log-grid small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.cross-app-log-grid button:first-child small { color: rgba(255,255,255,.72); }
.priorities-card { background: #f4f8f7; }
.priorities-heading { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12px; }
.priorities-heading p { margin-bottom: 0; }
.priority-heading-actions { display: flex; flex-direction: column; gap: 6px; }
.priority-heading-actions button { padding: 7px 10px; border: 1px solid rgba(31,90,73,.14); border-radius: 12px; color: var(--green); background: white; font-size: 8px; font-weight: 800; cursor: pointer; }
.priority-heading-actions button:first-child { color: white; background: var(--green); }
.priority-heading-actions button:first-child.active { color: #456b7e; background: #dfecef; }
.priority-list { display: grid; gap: 9px; margin-top: 14px; }
.work-priority { padding: 12px; border: 1px solid rgba(31,90,73,.1); border-radius: 16px; background: rgba(255,255,255,.72); }
.work-priority-title { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 9px; }
.work-priority-title > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: white; background: var(--green); font-size: 9px; font-weight: 800; }
.work-priority-title b,.work-priority-title small { display: block; }
.work-priority-title b { font-size: 11px; }
.work-priority-title small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.priority-statuses { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-top: 10px; }
.priority-statuses button { padding: 7px 3px; border: 1px solid rgba(71,107,124,.14); border-radius: 10px; color: #567582; background: #eef4f5; font-size: 7px; font-weight: 800; cursor: pointer; }
.priority-statuses button.selected { border-color: var(--green); color: white; background: var(--green); }
.priority-statuses button[data-priority-status="Done"].selected { background: #2f735d; }
.priority-statuses button[data-priority-status="Paused"].selected { background: #587785; }
.barrier-picker { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.barrier-picker p { margin: 0 0 7px; color: var(--ink); font-size: 8px; font-weight: 800; }
.barrier-picker p span { float: right; color: var(--muted); font-size: 7px; font-weight: 600; text-transform: uppercase; }
.barrier-options { display: flex; flex-wrap: wrap; gap: 5px; }
.barrier-options button { padding: 6px 8px; border: 1px solid rgba(71,107,124,.14); border-radius: 10px; color: #567582; background: #edf3f5; font-size: 7px; font-weight: 700; cursor: pointer; }
.barrier-options button.selected { border-color: #527d91; color: white; background: #527d91; }
.productivity-pattern-card { background: #eaf2f3; }
.productivity-score { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12px; }
.productivity-score strong { color: #456b7e; font: 600 34px/1 "Newsreader",serif; text-align: right; }
.productivity-score strong small { display: block; margin-top: 4px; color: var(--muted); font: 7px "DM Sans",sans-serif; text-transform: uppercase; letter-spacing: .07em; }
.productivity-dimensions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.productivity-dimensions span { padding: 9px; border-radius: 12px; background: rgba(255,255,255,.68); }
.productivity-dimensions b { display: block; font-size: 8px; }
.productivity-dimensions i { display: block; height: 4px; margin-top: 7px; overflow: hidden; border-radius: 4px; background: #d4e0e2; }
.productivity-dimensions i::after { content: ""; display: block; width: var(--score); height: 100%; border-radius: inherit; background: #527d91; }
.internal-signals { margin-top: 11px; padding: 10px; border-radius: 13px; background: rgba(255,255,255,.58); }
.internal-signals summary { color: #456b7e; font-size: 8px; font-weight: 800; cursor: pointer; }
.internal-signals p { margin: 7px 0 0; }
.productivity-adjustment-card { border-color: rgba(31,90,73,.2); background: #e7f1ed; }
.productivity-adjustment-card > summary { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.productivity-adjustment-card > summary::-webkit-details-marker { display: none; }
.productivity-adjustment-card summary small,.productivity-adjustment-card summary b { display: block; }
.productivity-adjustment-card summary small { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.productivity-adjustment-card summary b { margin-top: 5px; font: 600 19px/1.1 "Newsreader",serif; }
.productivity-adjustment-card summary em { color: #456b7e; font-size: 8px; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.productivity-adjustment-card:not([open]) summary em { font-size: 0; }
.productivity-adjustment-card:not([open]) summary em::after { content: "Open"; font-size: 8px; }
.productivity-adjustment-body { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(31,90,73,.1); }
.test-adjustment { margin-top: 12px; padding: 12px; border-radius: 15px; background: rgba(255,255,255,.7); }
.test-adjustment b,.test-adjustment span { display: block; }
.test-adjustment b { color: var(--green); font-size: 8px; text-transform: uppercase; letter-spacing: .07em; }
.test-adjustment span { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.test-adjustment button { margin-top: 9px; padding: 7px 9px; border: 0; border-radius: 11px; color: white; background: var(--green); font-size: 8px; font-weight: 800; cursor: pointer; }
.suggestion-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.suggestion-actions button { margin-top: 0; }
.suggestion-actions button:last-child { color: #456b7e; background: #dfecef; }
.weekly-plan-card { border-color: rgba(71,107,124,.2); background: #e8f1f3; }
.weekly-plan-heading { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12px; }
.weekly-plan-heading > span { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 14px; color: #456b7e; background: white; font-size: 9px; font-weight: 800; }
.weekly-plan-actions { display: grid; grid-template-columns: 1.35fr .65fr; gap: 8px; margin-top: 11px; }
.weekly-plan-actions button { padding: 11px 8px; border: 1px solid rgba(71,107,124,.18); border-radius: 14px; color: #456b7e; background: white; font-size: 9px; font-weight: 800; cursor: pointer; }
.weekly-plan-actions button:first-child { border: 0; color: white; background: #456b7e; }
.productivity-details { padding: 0; overflow: hidden; background: #eaf2f3; }
.productivity-details > summary { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none; }
.productivity-details > summary::-webkit-details-marker { display: none; }
.productivity-details summary small,.productivity-details summary b { display: block; }
.productivity-details summary small { color: #567582; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.productivity-details summary b { margin-top: 5px; font: 600 19px/1.1 "Newsreader",serif; }
.productivity-details summary strong { color: #456b7e; font: 600 30px/1 "Newsreader",serif; }
.productivity-details summary strong em { display: block; margin-top: 3px; color: var(--muted); font: 7px "DM Sans",sans-serif; text-align: right; text-transform: uppercase; letter-spacing: .05em; }
.productivity-details summary strong::after { content: " ›"; font: 15px "DM Sans",sans-serif; }
.productivity-details[open] summary strong::after { content: " ⌄"; }
.productivity-details-body { padding: 0 18px 18px; border-top: 1px solid rgba(71,107,124,.12); }
.productivity-details-body > p { margin-top: 12px; }
.internal-tracking-note { padding: 10px; border-radius: 13px; background: rgba(255,255,255,.62); }
.health-momentum-card { padding: 0; overflow: hidden; border-color: rgba(71,107,124,.18); background: #e8f1f3; }
.health-momentum-card > summary { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; }
.health-momentum-card > summary::-webkit-details-marker { display: none; }
.health-momentum-card summary small,.health-momentum-card summary b,.health-momentum-card summary strong,.health-momentum-card summary em { display: block; }
.health-momentum-card summary small { color: #567582; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.health-momentum-card summary b { margin-top: 5px; font: 600 20px/1.1 "Newsreader",serif; }
.health-momentum-card summary strong { color: #456b7e; font: 700 14px/1.1 "DM Sans",sans-serif; text-align: right; }
.health-momentum-card summary strong em { margin-top: 5px; color: var(--muted); font: 7px "DM Sans",sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.health-momentum-card summary strong::after { content: " ›"; font: 14px "DM Sans",sans-serif; }
.health-momentum-card[open] summary strong::after { content: "⌄"; margin-left: 4px; }
.health-momentum-body { padding: 0 18px 18px; border-top: 1px solid rgba(71,107,124,.12); }
.health-momentum-body > p { margin-top: 12px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.momentum-dimensions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.momentum-dimensions span { padding: 9px; border-radius: 12px; background: rgba(255,255,255,.68); }
.momentum-dimensions b { display: block; font-size: 8px; }
.momentum-dimensions i { display: block; height: 4px; margin-top: 7px; overflow: hidden; border-radius: 4px; background: #d4e0e2; }
.momentum-dimensions i::after { content: ""; display: block; width: var(--score); height: 100%; border-radius: inherit; background: #527d91; }
.momentum-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 11px; }
.momentum-options button { padding: 8px 6px; border: 1px solid rgba(71,107,124,.16); border-radius: 12px; color: #456b7e; background: white; font-size: 8px; font-weight: 800; cursor: pointer; }
.momentum-options button.selected { border-color: rgba(31,90,73,.25); color: white; background: var(--green); }
.life-tools-card { padding: 18px; border: 1px solid rgba(31,90,73,.12); border-radius: 21px; background: rgba(255,255,255,.58); }
.life-tools-card h2 { margin: 4px 0 12px; font: 600 21px/1.1 "Newsreader",serif; }
.life-tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.life-tool-grid button { min-height: 92px; padding: 11px; border: 1px solid rgba(71,107,124,.14); border-radius: 15px; color: var(--ink); background: #edf4f5; text-align: left; cursor: pointer; }
.life-tool-grid button > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #456b7e; background: white; font-size: 13px; font-weight: 800; }
.life-tool-grid b,.life-tool-grid small { display: block; }
.life-tool-grid b { margin-top: 8px; font-size: 10px; }
.life-tool-grid small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.urgent-card { border-color: rgba(110,145,167,.28); background: #e4eef3; }
.urgent-actions button:last-child { color: white; background: #426f84; }
.doctor-button { width: 100%; margin-bottom: 10px; color: white; background: var(--green); border: 0; }
.signal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.signal-grid span { padding: 9px 10px; border-radius: 13px; color: #456b7e; background: #e5f0f3; font-size: 9px; font-weight: 800; }
.life-signal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.life-signal-grid span { padding: 9px 10px; border-radius: 13px; color: #356d68; background: #e3efee; font-size: 9px; font-weight: 800; }
.goal-chip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.goal-chip-grid button { padding: 10px; border: 1px solid rgba(31,90,73,.14); border-radius: 14px; color: #356d68; background: #eaf4f1; font-size: 9px; font-weight: 800; text-align: left; cursor: pointer; }
.stressor-chip-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.stressor-chip-grid button { padding: 8px 10px; border: 1px solid rgba(71,107,124,.16); border-radius: 14px; color: #456b7e; background: #eaf2f4; font-size: 9px; font-weight: 800; cursor: pointer; }
.stressor-chip-grid button.selected { border-color: #456b7e; color: white; background: #527d91; }
.stressor-response { margin-top: 11px; padding: 12px; border-radius: 15px; background: #edf4f5; }
.stressor-response b,.stressor-response span,.stressor-response small { display: block; }
.stressor-response b { font-size: 10px; }
.stressor-response span { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.stressor-response small { margin-top: 7px; color: #567582; font-size: 8px; line-height: 1.4; }
.cleaning-companion-card { border-color: rgba(71,107,124,.2); background: #e8f1f3; }
.cleaning-help-example { margin: 12px 0; padding: 11px; border-radius: 14px; background: rgba(255,255,255,.65); }
.cleaning-help-example b,.cleaning-help-example span { display: block; }
.cleaning-help-example b { color: #456b7e; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.cleaning-help-example span { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.cleaning-companion-card > button { width: 100%; padding: 11px; border: 0; border-radius: 14px; color: white; background: #456b7e; font-size: 10px; font-weight: 800; cursor: pointer; }
.cleaning-page-heading { padding-bottom: 12px; }
.cleaning-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 21px 14px; padding: 5px; border: 1px solid rgba(71,107,124,.16); border-radius: 16px; background: rgba(255,255,255,.58); }
.cleaning-tabs button { min-height: 36px; border: 0; border-radius: 12px; color: #567582; background: transparent; font-size: 9px; font-weight: 800; cursor: pointer; }
.cleaning-tabs button.selected { color: white; background: #456b7e; }
.clean-panel { display: none; margin: 0 21px; }
.clean-panel.active { display: grid; gap: 12px; }
.clean-builder-card { background: #f4f8f7; }
.clean-builder-heading,.clean-task-heading,.clean-list-heading { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12px; }
.clean-builder-heading > span,.clean-task-heading > span { display: grid; place-items: center; min-width: 52px; height: 38px; padding: 0 9px; border-radius: 13px; color: #456b7e; background: #e4eef3; font-size: 9px; font-weight: 800; white-space: nowrap; }
.clean-photo-upload { margin: 13px 0 11px; color: #456b7e; background: #e5f0f3; border-color: rgba(71,107,124,.32); cursor: pointer; }
.clean-photo-upload > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 11px; color: white; background: #456b7e; font-size: 18px; }
.clean-photo-preview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 4px 0 12px; }
.clean-photo-preview figure { min-width: 0; margin: 0; padding: 6px; border-radius: 13px; background: rgba(255,255,255,.72); }
.clean-photo-preview img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.clean-photo-preview figcaption,.clean-photo-preview span { display: block; overflow: hidden; margin-top: 5px; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.clean-photo-preview span { margin: 0; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.72); }
.clean-builder-card label { display: block; margin-top: 8px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.clean-builder-card textarea { width: 100%; min-height: 92px; margin-top: 6px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--white); outline: none; font: 12px/1.4 "DM Sans",sans-serif; resize: vertical; }
.clean-context-grid,.clean-approach-row,.clean-feedback-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.clean-context-grid button,.clean-approach-row button,.clean-feedback-row button { padding: 8px 9px; border: 1px solid rgba(71,107,124,.16); border-radius: 12px; color: #456b7e; background: #eaf2f4; font-size: 8px; font-weight: 800; cursor: pointer; }
.clean-context-grid button.selected,.clean-approach-row button.selected { border-color: #456b7e; color: white; background: #527d91; }
.clean-helper-copy { margin: 12px 0 -2px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.clean-build-button { margin-top: 14px; background: #456b7e; }
.clean-learning-card { border-color: rgba(31,90,73,.16); background: #e7f1ed; }
.clean-learning-card h3 { margin-bottom: 6px; }
.clean-feedback-row button { color: var(--green); background: rgba(255,255,255,.72); }
.clean-task-card { background: #f8fbfb; }
.clean-task-heading h3 { margin-bottom: 4px; }
.clean-task-list { display: grid; gap: 8px; margin-top: 13px; }
.clean-task-item { width: 100%; min-height: 68px; display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid rgba(71,107,124,.13); border-radius: 16px; color: var(--ink); background: rgba(255,255,255,.75); text-align: left; cursor: pointer; }
.clean-task-item > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 11px; color: #456b7e; background: #dfecef; font-size: 9px; font-weight: 900; }
.clean-task-item.current { border-color: rgba(31,90,73,.24); background: #e3eee9; }
.clean-task-item.current > span { color: white; background: var(--green); }
.clean-task-item b,.clean-task-item small { display: block; }
.clean-task-item b { font-size: 11px; line-height: 1.2; }
.clean-task-item small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.3; }
.clean-task-item em { color: #456b7e; font-size: 8px; font-style: normal; font-weight: 800; white-space: nowrap; }
.clean-task-item:not(.current) { opacity: .76; }
.clean-empty-plan { margin-top: 12px; padding: 13px; border-radius: 15px; background: #eaf2f4; }
.clean-empty-plan b,.clean-empty-plan span { display: block; }
.clean-empty-plan b { font-size: 10px; }
.clean-empty-plan span { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.clean-stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin-top: 12px; }
.clean-stat-grid span { min-width: 0; padding: 10px 6px; border-radius: 13px; background: rgba(255,255,255,.72); text-align: center; }
.clean-stat-grid b,.clean-stat-grid small { display: block; }
.clean-stat-grid b { color: #456b7e; font: 600 20px/1 "Newsreader",serif; }
.clean-stat-grid small { margin-top: 5px; color: var(--muted); font-size: 7px; font-weight: 800; text-transform: uppercase; }
.clean-list-heading { align-items: center; margin-bottom: 10px; }
.clean-list-heading button { padding: 7px 9px; border: 1px solid rgba(71,107,124,.15); border-radius: 11px; color: #456b7e; background: white; font-size: 8px; font-weight: 800; cursor: pointer; }
.clean-completed-list,.clean-history-list,.clean-average-list { display: grid; gap: 8px; }
.clean-completed-list article,.clean-history-list article,.clean-average-list article { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 9px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.72); }
.clean-completed-list b,.clean-history-list b,.clean-average-list b { display: block; font-size: 10px; }
.clean-completed-list small,.clean-completed-list span,.clean-history-list span,.clean-average-list span { color: var(--muted); font-size: 8px; line-height: 1.35; }
.clean-completed-list > p,.clean-average-list > p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.clean-history-list em,.clean-average-list em { color: #456b7e; font-size: 8px; font-style: normal; font-weight: 800; white-space: nowrap; }
.clean-average-details { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(71,107,124,.12); }
.clean-average-details summary { color: #456b7e; font-size: 9px; font-weight: 800; cursor: pointer; }
.clean-average-list { margin-top: 9px; }
.clean-undo-bar { position: fixed; z-index: 12; left: 50%; bottom: 86px; width: min(calc(100% - 32px),488px); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 11px 12px 11px 14px; border-radius: 17px; color: white; background: #1b332b; box-shadow: 0 12px 32px rgba(25,34,31,.22); transform: translateX(-50%); }
.clean-undo-bar span { overflow: hidden; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.clean-undo-bar button { padding: 8px 10px; border: 0; border-radius: 11px; color: #1b332b; background: white; font-size: 9px; font-weight: 900; cursor: pointer; }
.money-action-list { display: grid; gap: 8px; margin-top: 13px; }
.money-action-list button { width: 100%; padding: 11px; border: 1px solid rgba(71,107,124,.2); border-radius: 14px; color: #456b7e; background: rgba(255,255,255,.72); font-size: 10px; font-weight: 800; text-align: left; cursor: pointer; }
.sync-card { background: #f3f8f8; }
.sync-toggle-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.signal-toggle { min-height: 58px; padding: 10px; border: 1px solid rgba(71,107,124,.2); border-radius: 15px; color: #4e6875; background: rgba(255,255,255,.72); text-align: left; cursor: pointer; }
.signal-toggle b,.signal-toggle span { display: block; }
.signal-toggle b { font-size: 10px; }
.signal-toggle span { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.3; }
.signal-toggle.selected { border-color: rgba(31,90,73,.35); color: var(--green); background: #dfeee8; box-shadow: inset 0 0 0 1px rgba(31,90,73,.05); }
.cross-insight-card { display: grid; grid-template-columns: 58px 1fr; gap: 14px; padding: 18px; border: 1px solid rgba(71,107,124,.22); border-radius: 22px; background: #e4eef3; }
.cross-insight-card h3 { margin: 5px 0 7px; font: 600 21px/1.1 "Newsreader",serif; }
.cross-insight-card p { margin: 0; color: #52666e; font-size: 10px; line-height: 1.55; }

.bottom-nav { position: fixed; z-index: 5; bottom: 0; left: 50%; width: min(100%, 520px); display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; padding: 8px 10px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(245,248,247,.94); backdrop-filter: blur(16px); transform: translateX(-50%); }
.nav-button { position: relative; display: grid; gap: 3px; place-items: center; min-height: 46px; padding: 7px 1px 6px; border: 1px solid transparent; border-radius: 16px; color: #8c918a; background: none; font-size: 8px; font-weight: 700; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.nav-button .nav-icon { display: grid; place-items: center; width: 24px; height: 24px; color: currentColor; line-height: 1; }
.nav-button .nav-icon svg { display: block; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.nav-button.active .nav-icon svg { stroke-width: 2.25; }
.nav-button.active { border-color: rgba(31,90,73,.18); color: var(--green); background: #e3eee9; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); transform: translateY(-1px); }
.nav-button.active::before { content: ""; position: absolute; top: 5px; width: 18px; height: 3px; border-radius: 999px; background: var(--green); }
.nav-button.active .nav-icon { color: var(--green); }
.food-fab { position: fixed; z-index: 8; right: max(calc((100vw - 520px)/2 + 18px),18px); bottom: 86px; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; overflow: visible; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; color: white; background: var(--green); box-shadow: 0 10px 26px rgba(31,90,73,.24); cursor: pointer; transition: width .18s ease, border-radius .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
.food-fab span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; color: var(--green); background: white; font-size: 22px; line-height: 1; }
.food-fab b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.food-fab[data-date-badge] { width: 112px; grid-template-columns: 31px 1fr; gap: 7px; justify-items: start; padding: 0 13px 0 9px; border-width: 2px; border-radius: 999px; }
.food-fab[data-date-badge] b { position: static; width: auto; height: auto; overflow: visible; clip: auto; color: white; font-size: 9px; font-weight: 900; line-height: 1.05; text-transform: uppercase; white-space: normal; }
.food-fab[data-date-badge]::after { content: attr(data-date-badge); position: absolute; right: -6px; top: -12px; padding: 4px 7px; border: 1px solid rgba(255,255,255,.92); border-radius: 999px; font-size: 7px; font-weight: 1000; letter-spacing: .04em; box-shadow: 0 8px 18px rgba(29,35,55,.16); }
html[data-date-scope="past"] .food-fab[data-date-badge] { border-color: rgba(255,255,255,.9); background: linear-gradient(135deg,#9f3412 0%,#ea580c 56%,#f59e0b 100%); box-shadow: 0 16px 34px rgba(180,83,9,.34); }
html[data-date-scope="past"] .food-fab[data-date-badge] span { color: #9f3412; background: #fff7ed; }
html[data-date-scope="past"] .food-fab[data-date-badge]::after { color: #7c2d12; background: #ffedd5; }
html[data-date-scope="future"] .food-fab[data-date-badge] { border-color: rgba(255,255,255,.9); background: linear-gradient(135deg,#315f7b 0%,#16869a 62%,#67b8ad 100%); box-shadow: 0 16px 34px rgba(22,134,154,.28); }
html[data-date-scope="future"] .food-fab[data-date-badge] span { color: #315f7b; background: #edf9fb; }
html[data-date-scope="future"] .food-fab[data-date-badge]::after { color: #315f7b; background: #e0f2fe; }

.modal-backdrop { position: fixed; z-index: 20; inset: 0; display: flex; align-items: end; justify-content: center; padding: 18px; background: rgba(25,34,31,.45); backdrop-filter: blur(5px); }
.modal-backdrop[hidden] { display: none; }
.meal-modal { width: min(100%, 500px); padding: 13px 22px 25px; border-radius: 28px 28px 20px 20px; background: var(--paper); box-shadow: 0 -20px 70px rgba(25,34,31,.22); }
.modal-handle { width: 40px; height: 4px; margin: 0 auto 14px; border-radius: 8px; background: #c7c2ba; }
.modal-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.modal-title h2 { margin: 3px 0 0; font: 600 28px "Newsreader", serif; }
.photo-upload { width: 100%; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 14px; border: 1px dashed #96a69e; border-radius: 16px; color: var(--green); background: var(--green-light); text-align: left; }
.photo-upload > span { font-size: 25px; }.photo-upload b,.photo-upload small { display: block; }.photo-upload b { font-size: 11px; }.photo-upload small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.food-photo-review { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 10px; margin: -4px 0 12px; padding: 10px; border: 1px solid rgba(22,134,154,.16); border-radius: 16px; background: rgba(255,255,255,.76); }
.food-photo-review figure { margin: 0; min-width: 0; }
.food-photo-review img { display: block; width: 74px; height: 74px; object-fit: cover; border-radius: 13px; }
.food-photo-review figcaption { overflow: hidden; margin-top: 4px; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.food-photo-review b,.food-photo-review small { display: block; }
.food-photo-review b { font-size: 10px; }
.food-photo-review small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.food-photo-review button { padding: 8px 9px; border: 1px solid rgba(71,107,124,.16); border-radius: 11px; color: #456b7e; background: #edf4f5; font-size: 8px; font-weight: 800; cursor: pointer; }
.meal-modal label { display: block; margin-top: 10px; color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.meal-modal input,.meal-modal select,.meal-modal textarea { width: 100%; margin-top: 5px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: var(--white); outline: none; font: 12px/1.4 "DM Sans",sans-serif; }
.meal-modal textarea { resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.primary-button { width: 100%; margin-top: 18px; padding: 14px; border: 0; border-radius: 14px; color: white; background: var(--green); font-size: 12px; font-weight: 700; cursor: pointer; }
.primary-button:disabled { cursor: not-allowed; opacity: .45; }
.info-modal,.quick-add-modal,.prescription-modal,.med-prompt-modal { max-height: 92vh; overflow-y: auto; }
.med-prompt-dose { padding: 14px; border: 1px solid rgba(31,90,73,.14); border-radius: 17px; background: #e7f1ed; }
.med-prompt-dose small,.med-prompt-dose b,.med-prompt-dose span { display: block; }
.med-prompt-dose small { color: #567582; font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; }
.med-prompt-dose b { margin-top: 7px; font-size: 17px; }
.med-prompt-dose span { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.med-prompt-note { margin: 12px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.med-prompt-actions { display: grid; gap: 8px; margin-top: 14px; }
.med-prompt-actions .primary-button { margin-top: 0; }
.med-prompt-actions button:not(.primary-button) { width: 100%; padding: 12px; border: 1px solid rgba(71,107,124,.18); border-radius: 14px; color: #456b7e; background: white; font-size: 10px; font-weight: 900; cursor: pointer; }
.info-body { color: var(--muted); font-size: 11px; line-height: 1.55; }
.info-body p { margin: 0 0 10px; }
.info-body a { color: var(--green); font-weight: 800; }
.info-points { display: grid; gap: 8px; margin: 12px 0; }
.info-points article { padding: 11px; border-radius: 14px; background: #e7f1ed; }
.info-points b,.info-points span { display: block; }
.info-points b { color: var(--ink); font-size: 10px; }
.info-points span { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.quick-add-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.quick-add-grid button { min-height: 72px; padding: 12px; border: 1px solid rgba(71,107,124,.16); border-radius: 15px; color: var(--ink); background: rgba(255,255,255,.72); text-align: left; cursor: pointer; }
.quick-add-grid button:first-child { color: white; background: var(--green); }
.quick-add-grid b,.quick-add-grid small { display: block; }
.quick-add-grid b { font-size: 11px; }
.quick-add-grid small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.quick-add-grid button:first-child small { color: rgba(255,255,255,.72); }
.quick-add-back { margin: -2px 0 10px; padding: 0; border: 0; color: var(--green); background: none; font-size: 10px; font-weight: 800; cursor: pointer; }
.quick-add-composer { margin: 12px 0; padding: 12px; border-radius: 16px; background: #e7f1ed; }
.quick-add-composer label { margin: 0; color: var(--green); }
.quick-add-composer label span { float: right; color: var(--muted); font-size: 8px; font-weight: 600; }
.quick-add-composer textarea { min-height: 58px; background: white; }
.quick-add-composer button { width: 100%; margin-top: 9px; padding: 10px; border: 0; border-radius: 12px; color: white; background: var(--green); font-size: 10px; font-weight: 800; cursor: pointer; }
.quick-water-flow { margin-top: 12px; padding: 13px; border: 1px solid rgba(31,90,73,.12); border-radius: 17px; background: rgba(255,255,255,.72); }
.quick-water-flow h3 { margin: 4px 0 0; font: 780 20px/1.1 "DM Sans",sans-serif; }
.quick-water-flow p:not(.eyebrow) { margin: 9px 0 0; color: #567582; font-size: 10px; font-weight: 800; }
.quick-water-actions { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-top: 12px; }
.quick-water-actions button { min-height: 42px; padding: 10px; border: 1px solid rgba(22,134,154,.16); border-radius: 13px; color: var(--accent-2); background: rgba(255,255,255,.88); font-size: 10px; font-weight: 900; cursor: pointer; }
.quick-water-actions button:first-child { color: white; background: var(--action-gradient); }
.recent-bubble-row,.followup-bubbles { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 13px; }
.recent-bubble-row button,.followup-bubbles button { padding: 8px 10px; border: 1px solid rgba(71,107,124,.16); border-radius: 999px; color: #456b7e; background: #eaf2f4; font-size: 9px; font-weight: 800; cursor: pointer; }
.followup-bubbles button.selected { border-color: var(--green); color: white; background: var(--green); }
.quick-add-helper { flex-basis: 100%; margin: -2px 0 2px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.followup-bubbles button.quick-add-continue { margin-left: auto; border-color: var(--green); color: white; background: var(--green); }
.quick-add-flow { margin-top: 12px; padding: 13px; border: 1px solid rgba(31,90,73,.12); border-radius: 17px; background: rgba(255,255,255,.7); }
.quick-add-flow h3 { margin: 4px 0 0; font: 600 20px/1.1 "Newsreader",serif; }
.quick-add-flow label { margin-top: 10px; text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 10px; }
.quick-add-flow label span { float: right; color: var(--muted); font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.quick-add-result { margin-top: 12px; padding: 13px; border-radius: 17px; background: #e3eef3; }
.quick-add-result h3 { margin: 4px 0 7px; font: 600 20px/1.1 "Newsreader",serif; }
.quick-add-result p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.quick-add-result ul { margin: 10px 0 0 18px; padding: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.quick-add-result-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.quick-add-result-actions button { padding: 8px 10px; border: 1px solid rgba(71,107,124,.18); border-radius: 12px; color: #456b7e; background: white; font-size: 8px; font-weight: 800; cursor: pointer; }
.warning-upload { border-color: rgba(71,107,124,.25); color: #456b7e; background: #e2eef3; }
.warning-upload > span { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 12px; color: white; background: #456b7e; font-size: 18px; font-weight: 900; }
.safety-confirmation { margin: 12px 0; padding: 13px; border: 1px solid rgba(71,107,124,.18); border-radius: 16px; background: #f0f6f7; }
.safety-confirmation > b { color: #456b7e; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.safety-confirmation p { margin: 6px 0 10px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.safety-confirmation label { display: grid; grid-template-columns: 16px 1fr; gap: 8px; margin-top: 9px; color: var(--ink); font-size: 9px; font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.4; }
.safety-confirmation input { width: auto; margin: 0; }
.rx-preview { padding: 13px; border-radius: 16px; background: rgba(255,255,255,.66); }
.rx-preview h3 { margin: 5px 0 6px; font: 600 20px/1.1 "Newsreader",serif; }
.rx-preview p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.different-prescribed { margin-top: 11px; border-radius: 13px; background: #e7f1ed; }
.different-prescribed summary { padding: 10px; color: var(--green); font-size: 9px; font-weight: 800; cursor: pointer; list-style: none; }
.different-prescribed summary::-webkit-details-marker { display: none; }
.different-prescribed p { padding: 0 10px 10px; }
.different-prescribed button { margin: 0 10px 10px; padding: 8px 9px; border: 1px solid rgba(31,90,73,.14); border-radius: 12px; color: var(--green); background: white; font-size: 8px; font-weight: 800; cursor: pointer; }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 92px; max-width: calc(100% - 40px); padding: 11px 17px; border-radius: 20px; color: white; background: #1b332b; font-size: 11px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translate(-50%,10px); transition: .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%,0); }

.checkin-modal { max-height: 92vh; overflow-y: auto; }
.checkin-question { margin: 0; padding: 13px 0; border: 0; border-bottom: 1px solid var(--line); }
.checkin-question legend { width: 100%; display: flex; justify-content: space-between; align-items: end; padding: 0 0 9px; }
.checkin-question legend b { color: var(--ink); font-size: 11px; }.checkin-question legend small { color: var(--muted); font-size: 8px; }
.scale-options { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; }
.scale-options button { height: 38px; border: 1px solid var(--line); border-radius: 11px; color: #536d76; background: var(--white); font-size: 11px; font-weight: 700; cursor: pointer; }
.scale-options button.selected { border-color: var(--green); color: white; background: var(--green); box-shadow: 0 5px 12px rgba(31,90,73,.16); }
.optional-context { margin-top: 13px; border-radius: 13px; background: #e8f0f2; }
.optional-context summary { padding: 11px; color: var(--green); font-size: 10px; font-weight: 700; cursor: pointer; list-style: none; }.optional-context summary span { float: right; color: var(--muted); font-size: 8px; font-weight: 500; text-transform: uppercase; }
.optional-context textarea { width: calc(100% - 20px); margin: 0 10px 10px; padding: 10px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; background: var(--white); font: 11px/1.45 "DM Sans",sans-serif; }
.checkin-privacy { margin: 12px 0 0; color: var(--muted); font-size: 8px; line-height: 1.4; text-align: center; }
.settings-backdrop { z-index: 26; }
.settings-modal { max-height: 92vh; overflow-y: auto; }
.settings-intro { margin: -5px 0 13px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.settings-list { display: grid; gap: 8px; }
.prototype-data-card { margin-top: 12px; padding: 13px; border: 1px solid rgba(71,107,124,.15); border-radius: 17px; background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(238,246,248,.72)); }
.prototype-data-card h3 { margin: 3px 0 6px; font: 600 20px/1.05 "Newsreader",serif; color: var(--ink); }
.prototype-data-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.prototype-data-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.prototype-data-actions button, .prototype-data-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 9px 8px; border: 1px solid rgba(40,87,232,.15); border-radius: 6px; color: var(--green); background: rgba(255,255,255,.8); font-size: 8px; font-weight: 900; text-decoration: none; cursor: pointer; }
.prototype-data-actions button:first-child { border: 0; color: white; background: var(--action-gradient); box-shadow: var(--button-shadow); }
.prototype-data-actions button.danger { grid-column: 1 / -1; border-color: rgba(174,61,79,.22); color: #8b3443; background: rgba(255,246,247,.9); }

.food-source-tools { display: grid; grid-template-columns: 1fr minmax(120px, .7fr) auto; align-items: end; gap: 8px; }
.food-source-tools button { min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--green); background: #fff; font-size: 9px; font-weight: 900; }
.food-source-status { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.food-source-results { display: grid; gap: 6px; max-height: 210px; overflow-y: auto; }
.food-source-results button { display: grid; gap: 3px; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 6px; text-align: left; color: var(--ink); background: #fff; }
.food-source-results b, .food-source-results span, .food-source-results small { display: block; }
.food-source-results span, .food-source-results small { color: var(--muted); font-size: 9px; }

@media (max-width: 560px) {
  .food-source-tools { grid-template-columns: 1fr 1fr; }
  .food-source-tools label { grid-column: 1 / -1; }
}
#prototype-data-status { margin-top: 10px; color: #456b7e; font-size: 9px; font-weight: 700; }
.setting-toggle { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.65); text-align: left; cursor: pointer; }
.setting-toggle span b,.setting-toggle span small { display: block; }
.setting-toggle span b { font-size: 10px; }
.setting-toggle span small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.setting-toggle i { min-width: 32px; padding: 5px 7px; border-radius: 10px; color: #7a8781; background: #e7ecea; font-size: 8px; font-style: normal; font-weight: 800; text-align: center; }
.setting-toggle.selected { border-color: rgba(31,90,73,.22); background: #e8f1ed; }
.setting-toggle.selected i { color: white; background: var(--green); }
.secondary-wide-button { width: 100%; margin-top: 12px; padding: 11px; border: 1px solid rgba(31,90,73,.15); border-radius: 14px; color: var(--green); background: transparent; font-size: 9px; font-weight: 800; cursor: pointer; }
.data-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 12px 0; }
.data-type-grid span { padding: 10px; border-radius: 13px; color: #456b7e; background: #e7f1f4; font-size: 9px; font-weight: 800; }
.body-preference-card { padding: 13px; border: 1px solid rgba(31,90,73,.14); border-radius: 18px; background: #f7fbfa; }
.body-preference-card h3 { margin: 4px 0 8px; font: 600 21px/1.08 "Newsreader",serif; }
.body-preference-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.momentum-preview-card { margin-top: 10px; border-color: rgba(71,107,124,.18); background: #e8f1f3; }
.momentum-preview-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; padding: 10px 11px; border-radius: 14px; background: rgba(255,255,255,.72); }
.momentum-preview-row strong { color: #456b7e; font-size: 12px; }
.momentum-preview-row span { color: var(--green); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.body-pref-options { display: grid; gap: 8px; margin-top: 12px; }
.body-pref-option { width: 100%; padding: 11px; border: 1px solid rgba(71,107,124,.16); border-radius: 14px; color: #456b7e; background: white; text-align: left; cursor: pointer; }
.body-pref-option b,.body-pref-option span { display: block; }
.body-pref-option b { font-size: 10px; }
.body-pref-option span { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.body-pref-option.selected { border-color: rgba(31,90,73,.35); color: var(--green); background: #e8f1ed; box-shadow: inset 0 0 0 1px rgba(31,90,73,.05); }
.body-baseline-card { border-color: rgba(31,90,73,.15); background: linear-gradient(145deg,#f7fbf9,#edf5f1); }
.body-baseline-heading,.body-checkin-heading { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12px; }
.body-baseline-heading h3,.body-checkin-heading h3 { margin-bottom: 6px; }
.body-baseline-heading p,.body-checkin-heading p { margin: 0; }
.body-baseline-heading > span,.body-checkin-heading > span { padding: 6px 8px; border-radius: 999px; color: #315f48; background: rgba(255,255,255,.78); font-size: 8px; font-weight: 900; white-space: nowrap; }
.body-baseline-grid,.body-estimate-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 13px; }
.body-baseline-grid span,.body-estimate-grid span { min-height: 54px; padding: 9px; border-radius: 13px; background: rgba(255,255,255,.72); }
.body-baseline-grid b,.body-baseline-grid small,.body-estimate-grid b,.body-estimate-grid small { display: block; }
.body-baseline-grid b,.body-estimate-grid b { color: #315f48; font-size: 10px; line-height: 1.25; }
.body-baseline-grid small,.body-estimate-grid small { margin-top: 4px; color: var(--muted); font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.body-baseline-card > p { margin: 12px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.body-baseline-card > button { width: 100%; margin-top: 12px; padding: 10px; border: 0; border-radius: 13px; color: white; background: var(--green); font-size: 9px; font-weight: 900; cursor: pointer; }
.body-checkin-card { margin-top: 10px; background: #f7fbfa; }
.body-checkin-form { margin-top: 12px; }
.body-goal-label { text-transform: none !important; letter-spacing: 0 !important; }
.body-estimate-panel { margin-top: 12px; padding: 10px; border-radius: 15px; background: rgba(255,255,255,.72); }
.body-estimate-panel .body-estimate-grid { margin-top: 0; }
.body-estimate-note { margin: 10px 0 0 !important; color: var(--muted); font-size: 8px !important; line-height: 1.45 !important; }
.progress-photo-option { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin-top: 11px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.72); }
.progress-photo-option b,.progress-photo-option span { display: block; }
.progress-photo-option b { color: var(--ink); font-size: 10px; }
.progress-photo-option span { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.progress-photo-option button,.body-photo-review button { padding: 8px 9px; border: 1px solid rgba(31,90,73,.14); border-radius: 11px; color: var(--green); background: white; font-size: 8px; font-weight: 900; cursor: pointer; }
.body-photo-review { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 9px; margin-top: 9px; padding: 9px; border-radius: 14px; background: rgba(255,255,255,.72); }
.body-photo-review img { width: 44px; height: 44px; border-radius: 13px; object-fit: cover; }
.body-photo-review b,.body-photo-review span { display: block; }
.body-photo-review b { font-size: 10px; }
.body-photo-review span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.body-clear-button { margin-top: 10px; }
.goals-backdrop { z-index: 28; }
.goals-modal { max-height: 92vh; overflow-y: auto; }
.goal-option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.goal-option-grid button { min-height: 48px; padding: 10px; border: 1px solid rgba(31,90,73,.14); border-radius: 14px; color: #356d68; background: #eaf4f1; font-size: 9px; font-weight: 800; text-align: left; cursor: pointer; }
.goal-option-grid button.selected { border-color: var(--green); color: white; background: var(--green); }
.weekly-review-backdrop { z-index: 27; }
.safety-backdrop { z-index: 29; }
.weekly-review-modal { max-height: 94vh; overflow-y: auto; }
.review-step { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 9px; margin-top: 15px; padding: 10px; border-radius: 14px; background: #e8f1f3; }
.review-step > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: white; background: #456b7e; font-size: 9px; font-weight: 800; }
.review-step b,.review-step small { display: block; }
.review-step b { font-size: 10px; }
.review-step small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.capacity-options,.stalled-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }
.capacity-options button,.stalled-actions button { padding: 9px; border: 1px solid rgba(71,107,124,.15); border-radius: 12px; color: #456b7e; background: #edf4f5; font-size: 8px; font-weight: 800; cursor: pointer; }
.capacity-options button.selected,.stalled-actions button.selected { border-color: var(--green); color: white; background: var(--green); }
.weekly-personal-question { padding: 11px; border-radius: 14px; background: #f0f5f4; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.45; }
.screen-disclaimer { margin: 24px 21px 4px; padding: 10px 12px; border-radius: 16px; color: #607176; background: rgba(255,255,255,.58); font-size: 8px; line-height: 1.45; text-align: center; }
.major-update-callout { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin-top: 11px; padding: 11px; border: 1px solid rgba(71,107,124,.14); border-radius: 14px; background: #edf3f5; }
.major-update-callout b,.major-update-callout span { display: block; }
.major-update-callout b { font-size: 10px; }
.major-update-callout span { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.major-update-callout button { padding: 8px 9px; border: 1px solid rgba(71,107,124,.2); border-radius: 11px; color: #41677b; background: white; font-size: 8px; font-weight: 800; cursor: pointer; }
.event-backdrop { z-index: 24; }
.event-modal { max-height: 92vh; overflow-y: auto; }
.event-intro,.food-modal-intro { margin: -4px 0 13px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.date-scope-banner { margin: -4px 0 12px; padding: 12px 12px; border-radius: 15px; font-size: 10px; font-weight: 900; line-height: 1.4; }
.date-scope-banner::before { display: inline-block; margin-right: 7px; padding: 3px 6px; border-radius: 999px; font-size: 7px; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }
.date-scope-banner.past { border: 2px solid rgba(234,88,12,.44); color: #7c2d12; background: linear-gradient(135deg,#ffedd5,#fed7aa); box-shadow: 0 10px 24px rgba(180,83,9,.14); }
.date-scope-banner.past::before { content: "Past date"; color: white; background: #c2410c; }
.date-scope-banner.future { border: 2px solid rgba(71,107,124,.22); color: #315f7b; background: linear-gradient(135deg,#edf4ff,#e0f2fe); box-shadow: 0 10px 24px rgba(22,134,154,.1); }
.date-scope-banner.future::before { content: "Future"; color: white; background: #456b7e; }
html[data-date-scope="past"] .quick-add-modal,
html[data-date-scope="past"] #meal-form,
html[data-date-scope="past"] .checkin-modal { border-top: 4px solid #d79852; }
html[data-date-scope="future"] .quick-add-modal,
html[data-date-scope="future"] #meal-form,
html[data-date-scope="future"] .checkin-modal { border-top: 4px solid #86bad0; }
.event-type-field { margin: 0; padding: 0; border: 0; }
.event-type-field legend { margin-bottom: 7px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.event-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.event-type-grid button { min-height: 42px; padding: 9px; border: 1px solid rgba(71,107,124,.16); border-radius: 12px; color: #456b7e; background: #edf4f6; font-size: 9px; font-weight: 700; text-align: left; cursor: pointer; }
.event-type-grid button.selected { border-color: var(--green); color: white; background: var(--green); }
.optional-label { float: right; color: #87928c; font-size: 7px; font-weight: 600; }
.food-entry-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.food-entry-shortcuts button { padding: 11px; border: 1px solid rgba(31,90,73,.15); border-radius: 13px; color: var(--green); background: rgba(255,255,255,.78); font-size: 9px; font-weight: 800; cursor: pointer; }
.time-food-suggestions { margin-bottom: 13px; padding: 13px; border: 1px solid rgba(31,90,73,.13); border-radius: 17px; background: #e8f1ed; }
.time-food-suggestions h3 { margin: 4px 0 9px; font: 600 18px/1.1 "Newsreader",serif; }
.time-food-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.time-food-list button { min-width: 0; padding: 9px 7px; border: 1px solid rgba(31,90,73,.13); border-radius: 12px; background: rgba(255,255,255,.76); text-align: left; cursor: pointer; }
.time-food-list b,.time-food-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.time-food-list b { font-size: 9px; }
.time-food-list small { margin-top: 4px; color: var(--muted); font-size: 7px; }
.label-photo-tip { margin: -5px 0 14px; padding: 10px; border-radius: 13px; color: #52666e; background: #e8f0f2; font-size: 8px; line-height: 1.45; }
.label-photo-tip b { color: #41677b; }
.manual-entry-label { margin: 0 0 4px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.life-hero { display: grid; grid-template-columns: 1fr 100px; align-items: center; min-height: 190px; margin: 8px 16px 0; padding: 26px; overflow: hidden; border-radius: 28px; color: white; background: radial-gradient(circle at 95% 20%, #5d8976 0, transparent 32%), var(--green); box-shadow: var(--shadow); }
.life-hero h2 { max-width: 280px; margin: 6px 0 8px; font: 600 30px/1.05 "Newsreader", serif; }
.life-hero p:last-child { max-width: 290px; margin: 0; color: rgba(255,255,255,.7); font-size: 11px; line-height: 1.55; }
.sprout-friend { position: relative; width: 88px; height: 102px; align-self: end; }
.sprout-friend span { position: absolute; left: 14px; bottom: -24px; width: 68px; height: 82px; border-radius: 48% 48% 42% 42%; background: #dbecef; transform: rotate(-4deg); }
.sprout-friend span::after { content: ""; position: absolute; left: 27px; top: 42px; width: 15px; height: 7px; border-bottom: 2px solid #37554a; border-radius: 50%; }
.sprout-friend span b { position: absolute; top: 30px; width: 4px; height: 5px; border-radius: 50%; background: #37554a; }
.sprout-friend span b:first-child { left: 20px; }.sprout-friend span b:last-child { right: 20px; }
.sprout-friend > i { position: absolute; z-index: 1; top: 7px; width: 38px; height: 23px; border-radius: 100% 10% 100% 10%; background: #8fb9bd; }
.sprout-friend > i:first-child { left: 14px; transform: rotate(30deg); }.sprout-friend > i:nth-child(2) { right: 5px; border-radius: 10% 100% 10% 100%; transform: rotate(-24deg); }
.life-modules { padding: 30px 21px 0; }
.umbrella-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.umbrella-card { min-height: 174px; display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--line); border-radius: 21px; color: var(--ink); background: rgba(255,255,255,.66); text-align: left; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
.umbrella-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(33,53,47,.07); }
.umbrella-top { display: flex; align-items: center; justify-content: space-between; }
.umbrella-top > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; font-size: 16px; font-style: normal; font-weight: 700; }
.umbrella-top em { padding: 4px 6px; border-radius: 8px; color: var(--muted); background: rgba(255,255,255,.7); font-size: 7px; font-style: normal; font-weight: 700; text-transform: uppercase; }
.umbrella-card > b { margin-top: 15px; font: 600 21px/1 "Newsreader",serif; }
.umbrella-card > small { margin-top: 7px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.area-link { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; color: var(--green); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }.area-link i { font-size: 17px; font-style: normal; }
.health-area { background: #e3eee7; }.health-area .umbrella-top > i { color: #315c46; background: #f3f8f4; }
.productivity-area { background: #e2edf2; }.productivity-area .umbrella-top > i { color: #456b7e; background: #f3f8fa; }
.life-checkin-area { background: #e3efee; }.life-checkin-area .umbrella-top > i { color: #356d68; background: #f1f8f7; }
.money-area { background: #e8eef1; }.money-area .umbrella-top > i { color: #4e6875; background: #f5f8fa; }
.module-grid { display: grid; gap: 10px; }
.module-card { width: 100%; display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.58); text-align: left; cursor: default; }
.module-card.live { border-color: rgba(31,90,73,.28); background: #f7fbfa; cursor: pointer; }
.module-card > span:nth-child(2) b,.module-card > span:nth-child(2) small { display: block; }
.module-card > span:nth-child(2) b { font-size: 12px; }.module-card > span:nth-child(2) small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.module-card em { padding: 4px 7px; border-radius: 10px; color: var(--muted); background: var(--paper-deep); font-size: 8px; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.module-card.live em { color: var(--green); background: var(--green-light); }
.module-icon { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 14px; font-size: 18px; font-weight: 700; }
.module-icon.nutrition { color:#315c46;background:#dce9df }.module-icon.health { color:#41677b;background:#dfecef }.module-icon.labs { color:#566c8b;background:#dde4ef }.module-icon.mood { color:#346d68;background:#dcebea }.module-icon.cycle { color:#5f708b;background:#e0e7ef }.module-icon.focus { color:#45627b;background:#dce8ef }.module-icon.home { color:#496b65;background:#dfe9e6 }.module-icon.phone { color:#475b57;background:#dce5e1 }.module-icon.money { color:#497052;background:#deeadf }
.design-note { display: grid; grid-template-columns: 42px 1fr; gap: 13px; margin: 26px 21px 0; padding: 19px; border-radius: 20px; background: #dfecef; }
.mini-spark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #41677b; background: #eff6f7; }
.design-note h3 { margin: 5px 0; font: 600 19px/1.1 "Newsreader",serif; }.design-note p:last-child { margin: 0; color: #52666e; font-size: 10px; line-height: 1.5; }
.personality-section { padding: 28px 21px 0; }
.personality-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.personality-options button { padding: 11px 8px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.55); text-align: left; cursor: pointer; }
.personality-options button.selected { border: 2px solid var(--green); padding: 10px 7px; background: #f7fbfa; }
.personality-options span b,.personality-options span small { display:block; }.personality-options span b { margin-top: 7px; font-size: 10px; }.personality-options span small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.swatch { display: block; height: 22px; border-radius: 7px; }.swatch.minimal { background: linear-gradient(90deg,#e8edec 50%,#36423e 50%); }.swatch.balanced { background: linear-gradient(90deg,#dce9df 33%,#dfecef 33% 66%,#72a5bc 66%); }.swatch.playful { background: linear-gradient(90deg,#bfd9e8 33%,#cde5df 33% 66%,#769fb4 66%); }

.date-row { color: var(--ink); }
.icon-button {
  border-color: rgba(255,255,255,.72);
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(29,35,55,.08);
}

.capture-card,
.today-priority-card,
.priority-item,
.snapshot-grid article,
.summary-tile,
.bridge-card,
.wayfinder-preview-card,
.today-review-bridge,
.optional-review-section,
.quick-card,
.day-log,
.insight-card,
.coverage-item,
.search-box,
.library-card,
.pattern-list article,
.review-records-link,
.review-goals-card,
.review-week-summary,
.review-purpose-grid article,
.companion-research-card,
.wayfinder-system-card,
.health-overview-card,
.category-card,
.urgent-card,
.life-tools-card,
.cleaning-tabs,
.clean-builder-card,
.clean-task-card,
.clean-learning-card,
.sync-card,
.cross-insight-card,
.design-note,
.personality-options button {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(29,35,55,.07);
}

.capture-card:hover,
.summary-tile:hover,
.quick-card:hover,
.library-card:hover,
.bridge-card:hover,
.umbrella-card:hover,
.module-card.live:hover {
  transform: translateY(-2px);
  border-color: rgba(22,134,154,.24);
  box-shadow: 0 14px 32px rgba(29,35,55,.1);
}

.food-capture,
.hero-card,
.weekly-card,
.health-action-main,
.primary-button,
.quick-add-grid button:first-child,
.quick-add-composer button,
.followup-bubbles button.quick-add-continue,
.doctor-button,
.clean-build-button,
.bottom-nav .nav-button.active,
.cleaning-companion-card > button,
.review-records-link button,
.weekly-plan-actions button:first-child,
.test-adjustment button {
  background: var(--action-gradient);
  box-shadow: var(--button-shadow);
}

.capture-card.food-capture {
  border-color: rgba(255,255,255,.2);
}
.food-capture .capture-mark,
.hero-log-button span,
.again-label span,
.library-card button,
.module-card.live em,
.med-button.selected,
.health-action-secondary.selected,
.priority-heading-actions button:first-child,
.priority-statuses button.selected,
.med-dose-item.taken .med-dose-toggle,
.goal-option-grid button.selected,
.capacity-options button.selected,
.stalled-actions button.selected,
.event-type-grid button.selected,
.scale-options button.selected,
.setting-toggle.selected i,
.body-pref-option.selected,
.momentum-options button.selected {
  background: var(--accent-2);
}

.checkin-capture {
  border-color: rgba(22,134,154,.2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(237,248,251,.82)),
    linear-gradient(135deg, rgba(47,175,208,.1), rgba(108,99,217,.06));
  box-shadow: 0 12px 28px rgba(22,134,154,.1);
}
.checkin-capture:not(.complete) {
  border-color: rgba(22,134,154,.28);
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(237,248,251,.9)),
    linear-gradient(135deg, rgba(47,175,208,.14), rgba(108,99,217,.08));
}
.checkin-mark,
.bridge-icon,
.insight-icon,
.review-decision-icon,
.mini-spark,
.clean-photo-upload > span,
.warning-upload > span,
.weekly-plan-heading > span,
.life-tool-grid button > span,
.clean-builder-heading > span,
.clean-task-heading > span,
.clean-task-item > span {
  color: white;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.checkin-action,
.text-button,
.text-link-button,
.inline-reasoning summary,
.secondary-wide-button,
.quick-add-back,
.quick-add-composer label,
.optional-context summary,
.different-prescribed summary,
.info-body a,
.again-label,
.area-link,
.summary-tile small,
.bridge-action {
  color: var(--accent-2);
}

.today-priority-card,
.wayfinder-preview-card,
.health-overview-card,
.review-goals-card,
.productivity-adjustment-card,
.health-momentum-card,
.cleaning-companion-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,250,252,.9)),
    linear-gradient(135deg, rgba(16,63,74,.08), rgba(22,134,154,.06));
}
.today-priority-card {
  border-color: rgba(22,134,154,.15);
}
.priority-heading h2,
.section-title h2,
.page-heading h2,
.review-subheading h2,
.hero-card h2,
.weekly-heading h3,
.category-card h3,
.urgent-card h3,
.life-hero h2,
.umbrella-card > b,
.modal-title h2 {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 780;
  letter-spacing: 0;
}
.priority-item.main-goal,
.summary-tile.done,
.capture-card.complete,
.med-dose-item.taken,
.signal-toggle.selected,
.setting-toggle.selected,
.body-pref-option.selected,
.category-card.live {
  background: rgba(228,244,239,.88);
}
.summary-tile.needed,
.summary-tile.companion,
.summary-tile.focus,
.summary-tile.context,
.review-week-summary,
.weekly-plan-card,
.productivity-pattern-card,
.productivity-details,
.health-momentum-card,
.cleaning-companion-card,
.quick-add-result,
.warning-upload,
.label-photo-tip {
  background: rgba(237,248,251,.88);
}
.summary-tile.pending,
.summary-tile.idle,
.review-purpose-grid article,
.companion-research-card,
.urgent-card,
.money-card-main {
  background: rgba(248,250,252,.9);
}

.wayfinder-mark,
.wayfinder-mark.tiny,
.wayfinder-mark.large {
  background:
    radial-gradient(circle at 70% 28%, rgba(47,175,208,.34) 0 16%, transparent 17%),
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(228,244,239,.88));
  box-shadow: inset 0 0 0 1px rgba(22,134,154,.14), 0 10px 24px rgba(29,35,55,.08);
}
.wayfinder-mark::before,
.wayfinder-mark.tiny::before,
.wayfinder-mark.large::before {
  border-color: var(--accent-2);
}
.wayfinder-mark i,
.wayfinder-mark.tiny i,
.wayfinder-mark.large i {
  background: var(--green);
}
.wayfinder-mark span,
.wayfinder-mark.tiny span,
.wayfinder-mark.large span {
  background: #ffb166;
}

.hero-card,
.life-hero,
.weekly-card {
  border: 1px solid rgba(255,255,255,.2);
  background:
    radial-gradient(circle at 92% 10%, rgba(47,175,208,.38) 0, transparent 34%),
    var(--action-gradient);
  box-shadow: var(--shadow);
}
.health-nutrition-card {
  background:
    radial-gradient(circle at 90% 8%, rgba(103,184,173,.32) 0, transparent 34%),
    radial-gradient(circle at 12% 90%, rgba(255,177,102,.12) 0, transparent 32%),
    var(--insight-gradient);
}
.calorie-ring {
  background:
    radial-gradient(circle, rgba(16,63,74,.92) 61%, transparent 63%),
    conic-gradient(var(--cyan) 57%, rgba(255,255,255,.14) 0);
}
.macro-grid i::after,
.nutrition-expand .coverage-item.close,
.productivity-dimensions i::after,
.momentum-dimensions i::after {
  background: var(--cyan);
}

.hero-log-button,
.priority-footer button,
.key-focus-footer button,
.optional-review-section button,
.pill-row button,
.med-button,
.urgent-actions button,
.doctor-button,
.priority-heading-actions button,
.med-schedule-heading button,
.weekly-plan-actions button,
.clean-list-heading button,
.money-action-list button,
.food-entry-shortcuts button,
.quick-add-result-actions button,
.stressor-chip-grid button,
.clean-context-grid button,
.clean-approach-row button,
.clean-feedback-row button,
.goal-chip-grid button,
.event-type-grid button,
.capacity-options button,
.stalled-actions button,
.momentum-options button,
.chip {
  border-color: rgba(22,134,154,.16);
  background: rgba(255,255,255,.78);
  color: var(--accent-2);
}
.chip.active,
.cleaning-tabs button.selected,
.stressor-chip-grid button.selected,
.clean-context-grid button.selected,
.clean-approach-row button.selected,
.barrier-options button.selected {
  color: white;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
}

.bottom-nav {
  bottom: max(10px, env(safe-area-inset-bottom));
  width: min(calc(100% - 24px), 488px);
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 24px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 18px 44px rgba(29,35,55,.16);
}
.nav-button {
  min-height: 50px;
  border-radius: 18px;
  color: #6a7482;
  font-weight: 800;
}
.nav-button .nav-icon { width: 24px; height: 24px; }
.nav-button.active {
  border-color: rgba(255,255,255,.22);
  color: white;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 10px 24px rgba(40,87,232,.2);
}
.nav-button.active::before { background: rgba(255,255,255,.76); }
.nav-button.active .nav-icon { color: white; }
.food-fab {
  right: max(calc((100vw - 520px)/2 + 18px),18px);
  bottom: 92px;
  border-color: rgba(255,255,255,.55);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 12px 28px rgba(40,87,232,.24);
}
.food-fab span {
  color: var(--accent);
}

.modal-backdrop {
  background: rgba(17,24,39,.42);
  backdrop-filter: blur(7px);
}
.meal-modal {
  border: 1px solid rgba(255,255,255,.72);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,250,252,.94)),
    var(--paper);
  box-shadow: 0 -22px 70px rgba(17,24,39,.24);
}
.modal-handle { background: rgba(81,90,106,.24); }
.meal-modal input,
.meal-modal select,
.meal-modal textarea,
.clean-builder-card textarea {
  border-color: var(--line);
  background: rgba(255,255,255,.92);
}

.life-hero {
  background:
    radial-gradient(circle at 88% 16%, rgba(184,183,255,.36) 0, transparent 34%),
    var(--insight-gradient);
}
.sprout-friend span {
  background: rgba(255,255,255,.86);
}
.sprout-friend > i {
  background: #2fafd0;
}
.umbrella-card {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(29,35,55,.07);
}
.health-area { background: linear-gradient(180deg, rgba(228,244,239,.94), rgba(255,255,255,.86)); }
.productivity-area { background: linear-gradient(180deg, rgba(237,248,251,.96), rgba(255,255,255,.86)); }
.life-checkin-area { background: linear-gradient(180deg, rgba(232,242,255,.92), rgba(255,255,255,.86)); }
.money-area { background: linear-gradient(180deg, rgba(248,250,252,.96), rgba(255,255,255,.88)); }
.health-area .umbrella-top > i,
.module-icon.nutrition,
.module-icon.money { color: var(--emerald); background: rgba(228,244,239,.95); }
.productivity-area .umbrella-top > i,
.module-icon.health,
.module-icon.focus,
.module-icon.home { color: var(--accent-2); background: rgba(237,248,251,.95); }
.life-checkin-area .umbrella-top > i,
.module-icon.mood,
.module-icon.cycle,
.module-icon.labs { color: var(--insight); background: rgba(232,242,255,.95); }
.money-area .umbrella-top > i,
.module-icon.phone { color: #526170; background: rgba(248,250,252,.95); }
.umbrella-top em,
.module-card em {
  background: rgba(255,255,255,.76);
}
.module-card {
  border-color: var(--line);
  background: rgba(255,255,255,.74);
  box-shadow: 0 8px 22px rgba(29,35,55,.06);
}
.module-card.live {
  border-color: rgba(22,134,154,.2);
  background: rgba(255,255,255,.9);
}
.swatch.balanced { background: linear-gradient(90deg,#103f4a 33%,#16869a 33% 66%,#2fafd0 66%); }
.swatch.playful { background: linear-gradient(90deg,#2857e8 33%,#16869a 33% 66%,#b8b7ff 66%); }

@media (max-width: 430px) {
  .hero-heading { display: grid; grid-template-columns: 1fr; align-items: start; gap: 12px; }
  .hero-heading > div:not(.calorie-ring) { min-width: 0; grid-column: 1; grid-row: 1; }
  .hero-log-button { grid-column: 1; grid-row: 2; justify-self: start; }
  .calorie-ring { grid-column: 1; grid-row: 3; justify-self: start; width: 88px; height: 88px; flex-basis: 88px; }
  .calorie-ring span { font-size: 22px; }
  .hero-card h2 { font-size: 27px; }
  .hero-copy { max-width: 100%; }
}

@media (max-width: 370px) {
  .hero-card { padding: 20px; }
  .calorie-ring { width: 88px; height: 88px; flex-basis: 88px; }
  .today-capture { grid-template-columns: 1fr; }
  .priority-grid { grid-template-columns: 1fr; }
  .priority-footer { align-items: stretch; flex-direction: column; }
  .snapshot-grid,.health-signal-grid,.goal-chip-grid,.health-actions-card,.nutrition-key-insights,.cross-app-log-grid,.activity-quick-grid,.movement-support-heading,.movement-custom-row,.fitness-lane-panel,.fitness-lane-body,.body-baseline-heading,.body-checkin-heading,.progress-photo-option { grid-template-columns: 1fr; }
  .food-photo-review { grid-template-columns: 58px 1fr; }
  .food-photo-review img { width: 58px; height: 58px; }
  .food-photo-review button { grid-column: 1 / -1; }
  .health-trend-strip { grid-template-columns: 1fr 1fr; }
  .health-tab-row { grid-template-columns: 1fr 1fr; }
  .activity-heading { grid-template-columns: 1fr; }
  .activity-heading strong { width: 100%; height: auto; min-height: 58px; }
  .activity-stat-grid,.body-baseline-grid,.body-estimate-grid,.macro-target-grid { grid-template-columns: 1fr 1fr; }
  .movement-support-list article,.movement-routine-item,.body-photo-review { grid-template-columns: 1fr; }
  .review-purpose-grid { grid-template-columns: 1fr; }
  .review-summary-grid,.review-decisions,.life-tool-grid,.goal-option-grid { grid-template-columns: 1fr; }
  .optional-review-section { grid-template-columns: 1fr; }
  .major-update-callout { grid-template-columns: 1fr; }
  .quick-log { grid-template-columns: repeat(4, 118px); }
  .coverage-grid { grid-template-columns: 1fr; }
  .umbrella-grid { grid-template-columns: 1fr; }
}