@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --canvas: #f4f7ef;
  --card: #ffffff;
  --ink: #14251f;
  --ink-soft: #587068;
  --muted: #83938b;
  --line: #e5ece4;
  --lime: #b9ed76;
  --lime-light: #e8f8c9;
  --mint: #dff2bd;
  --coral: #ff816d;
  --coral-light: #fff0eb;
  --blue: #dfeaf8;
  --dark-card: #172d26;
  --shadow: 0 18px 55px rgba(29, 58, 47, .06);
  --radius: 22px;
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; background: var(--canvas); }
body { min-height: 100vh; margin: 0; overflow-x: hidden; background: var(--canvas); }
button, input { font: inherit; }
button { border: 0; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(79, 126, 91, .5); outline-offset: 3px; }
.icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 256px; min-height: 100vh; position: fixed; z-index: 20; inset: 0 auto 0 0; display: flex; flex-direction: column; padding: 32px 18px 22px; background: #fbfdf9; border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c8d9c0 transparent; }
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: #c8d9c0; border-radius: 99px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar-close { display: none; }
.sidebar-drawer-backdrop { display: none; }
.brand-lockup { display: flex; align-items: center; gap: 9px; padding: 0 14px 46px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font: 700 27px/1 'Space Grotesk', sans-serif; letter-spacing: -.07em; text-decoration: none; }
.brand-mark { width: 27px; height: 25px; display: inline-flex; align-items: end; gap: 3px; transform: skew(-16deg); }
.brand-mark span { display: block; width: 7px; border-radius: 7px 7px 3px 3px; background: var(--ink); }
.brand-mark span:nth-child(1) { height: 13px; opacity: .58; }
.brand-mark span:nth-child(2) { height: 20px; opacity: .8; }
.brand-mark span:nth-child(3) { height: 25px; }
.brand-beta { padding: 4px 6px; color: #699246; background: var(--lime-light); border-radius: 5px; font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.nav-list { display: grid; gap: 6px; }
.nav-item { min-height: 47px; display: flex; align-items: center; gap: 14px; padding: 0 14px; color: #7b8b83; background: transparent; border-radius: 12px; text-align: left; font-size: 13px; font-weight: 600; transition: .2s ease; }
.nav-item .icon { width: 18px; height: 18px; }
.nav-item:hover { color: var(--ink); background: #f1f6ec; }
.nav-item.is-active { color: var(--ink); background: var(--lime); box-shadow: 0 7px 16px rgba(153, 210, 85, .15); }
.sidebar-divider { height: 1px; margin: 38px 14px 26px; background: var(--line); }
.nav-label { margin: 0 14px 10px; color: #afbab1; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.sidebar-bottom { margin-top: auto; }
.upgrade-card { position: relative; overflow: hidden; margin: 0 4px 23px; padding: 19px 16px 17px; border-radius: 15px; background: #eff9dc; }
.upgrade-card::after { content: ''; width: 80px; height: 80px; position: absolute; right: -28px; bottom: -30px; border: 1px solid rgba(106, 151, 71, .18); border-radius: 50%; box-shadow: 0 0 0 12px rgba(106, 151, 71, .08), 0 0 0 24px rgba(106, 151, 71, .05); }
.upgrade-spark { width: 26px; height: 26px; display: grid; place-items: center; margin-bottom: 14px; color: #6f9e39; border-radius: 8px; background: #d5f0a8; }
.upgrade-spark .icon { width: 14px; height: 14px; }
.upgrade-card strong { display: block; font-size: 13px; }
.upgrade-card p { max-width: 155px; margin: 7px 0 14px; color: #6b806d; font-size: 11px; line-height: 1.45; }
.text-button { display: inline-flex; align-items: center; gap: 7px; padding: 0; color: var(--ink); background: transparent; font-size: 11px; font-weight: 700; }
.text-button .icon { width: 13px; height: 13px; }
.sidebar-user { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 7px; }
.sidebar-user > div:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.sidebar-user strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.sidebar-user span { color: var(--muted); font-size: 10px; }
.more-button, .kebab { margin-left: auto; padding: 5px; color: var(--muted); background: transparent; letter-spacing: 2px; cursor: pointer; }
.account-menu { position: fixed; z-index: 50; left: 14px; bottom: 74px; width: 222px; display: grid; gap: 5px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: 0 18px 42px rgba(35, 59, 47, .18); }
.account-menu-backdrop { display: none; }
.account-menu[hidden] { display: none; }
.account-menu-label { color: #9aaa9e; font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.account-menu-name { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-email { overflow: hidden; margin-bottom: 7px; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.account-menu button { padding: 9px 8px; color: var(--ink); border-top: 1px solid var(--line); background: transparent; font-size: 10px; font-weight: 700; text-align: left; cursor: pointer; }
.account-menu button:hover { color: #6f9e39; background: #f3f9ea; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; border: 3px solid #fff; border-radius: 50%; background: linear-gradient(145deg, #a8d879, #527e54); box-shadow: 0 3px 10px rgba(31, 52, 46, .16); font-size: 10px; font-weight: 700; }
.topbar-avatar { padding: 0; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.topbar-avatar:hover, .topbar-avatar:focus-visible { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(31, 52, 46, .22); outline: 0; }
.avatar-small { width: 33px; height: 33px; border-width: 0; font-size: 9px; }

.main-content { width: calc(100% - 256px); min-height: 100vh; margin-left: 256px; }
.topbar { height: 83px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 4vw, 65px); border-bottom: 1px solid rgba(220, 231, 220, .78); }
.breadcrumb { display: flex; align-items: center; gap: 11px; color: var(--muted); font-size: 11px; }
.breadcrumb i { width: 3px; height: 3px; display: block; border-radius: 50%; background: #b8c5bb; }
.breadcrumb strong { color: var(--ink); font-weight: 600; }
.live-clock { padding-left: 8px; color: #82a35d; font-size: 10px; font-variant-numeric: tabular-nums; }
.topbar-actions { display: flex; align-items: center; gap: 20px; }
.icon-button { position: relative; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; color: #789087; background: transparent; }
.icon-button:hover { color: var(--ink); }
.notification-button span { width: 5px; height: 5px; position: absolute; top: 3px; right: 2px; border: 1px solid var(--canvas); border-radius: 50%; background: var(--coral); }
.notification-button.is-read span { display: none; }
.mobile-menu, .mobile-nav { display: none; }
.content-wrap { max-width: 1440px; margin: 0 auto; padding: 46px clamp(24px, 4vw, 65px) 70px; }

.welcome-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 35px; padding-bottom: 47px; }
.eyebrow { margin: 0 0 12px; color: #95a39a; font-size: 9px; font-weight: 700; letter-spacing: .15em; line-height: 1.2; }
.eyebrow-dot { width: 6px; height: 6px; display: inline-block; margin-right: 6px; border-radius: 50%; background: var(--coral); vertical-align: 1px; }
.welcome-copy h1 { max-width: 620px; margin: 0; font: 600 clamp(37px, 4.25vw, 66px)/.98 'Space Grotesk', sans-serif; letter-spacing: -.072em; }
.welcome-copy h1 em { color: #76994f; font-style: normal; }
.welcome-subtitle { max-width: 470px; margin: 20px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.welcome-actions { display: flex; align-items: center; gap: 20px; margin-top: 25px; }
.primary-button, .dark-button, .light-button, .secondary-button, .outline-button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 17px; border-radius: 10px; font-size: 11px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.primary-button:hover, .dark-button:hover, .light-button:hover, .outline-button:hover, .secondary-button:hover { transform: translateY(-2px); }
.primary-button { color: var(--ink); background: var(--lime); box-shadow: 0 9px 18px rgba(141, 188, 75, .18); }
.primary-button .icon { width: 14px; height: 14px; }
.secondary-button { color: var(--ink); background: transparent; }
.secondary-button:hover { background: #e9f0e5; }
.streak-card { width: min(360px, 100%); padding: 20px 23px 22px; flex: 0 0 auto; border: 1px solid #e0e9df; border-radius: var(--radius); background: #eef7e1; }
.streak-topline { display: flex; justify-content: space-between; align-items: center; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; color: #719648; border-radius: 999px; background: #dff2bf; font-size: 9px; font-weight: 700; }
.status-pill span, .online-dot { width: 5px; height: 5px; display: inline-block; border-radius: 50%; background: #7eb749; box-shadow: 0 0 0 3px rgba(126, 183, 73, .14); }
.streak-body { display: flex; align-items: center; gap: 19px; margin-top: 20px; }
.progress-ring { width: 92px; height: 92px; position: relative; flex: 0 0 auto; }
.progress-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-ring circle { fill: none; stroke-width: 8; }
.ring-track { stroke: #d7e8c0; }
.ring-value { stroke: #7fa94e; stroke-linecap: round; stroke-dasharray: 264; stroke-dashoffset: 84; }
.progress-ring > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.progress-ring strong { font: 600 24px/.9 'Space Grotesk', sans-serif; letter-spacing: -.06em; }
.progress-ring span { margin-top: 3px; color: #71866b; font-size: 8px; }
.streak-copy { align-self: center; }
.streak-copy strong { font: 600 18px/1 'Space Grotesk', sans-serif; letter-spacing: -.05em; }
.streak-copy p { max-width: 145px; margin: 7px 0 13px; color: #71866b; font-size: 10px; line-height: 1.3; }
.mini-days { display: flex; gap: 6px; }
.mini-days span { width: 19px; height: 19px; display: grid; place-items: center; color: #8aa084; border-radius: 50%; background: rgba(255,255,255,.56); font-size: 8px; font-weight: 700; }
.mini-days .is-done { color: #fff; background: #87ac59; }

.section-heading, .card-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.section-heading h2, .card-heading h2 { margin: 0; font: 600 23px/1 'Space Grotesk', sans-serif; letter-spacing: -.055em; }
.outline-button { color: var(--ink-soft); border: 1px solid #d9e5da; background: transparent; }
.outline-button:hover { background: #e9f0e5; }
.outline-button .icon { width: 13px; height: 13px; color: #85a05f; }
.week-section { margin-bottom: 27px; }
.week-picker { display: grid; grid-template-columns: repeat(7, minmax(50px, 1fr)); gap: 8px; margin-top: 22px; padding: 7px; border: 1px solid #e2eae0; border-radius: 15px; background: rgba(255,255,255,.52); }
.day-tab { position: relative; min-height: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #8b9b92; border-radius: 10px; background: transparent; transition: .2s ease; }
.day-tab span { font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.day-tab strong { color: var(--ink); font: 600 17px/1 'Space Grotesk', sans-serif; }
.day-tab i { width: 4px; height: 4px; visibility: hidden; border-radius: 50%; background: var(--coral); }
.day-tab:hover { background: #edf4e9; }
.day-tab.is-active { background: #e5f5c9; box-shadow: inset 0 0 0 1px #d7ecb7; }
.day-tab.is-active span { color: #729451; }
.day-tab.is-active i { visibility: visible; }
.day-tab.is-complete i { width: 13px; height: 13px; display: grid; place-items: center; visibility: visible; color: #fff; border-radius: 50%; background: #91bb62; }
.day-tab.is-complete i::after { content: '✓'; font-size: 8px; font-style: normal; line-height: 1; }
.day-tab.is-locked { opacity: .38; cursor: not-allowed; pointer-events: none; }
.day-tab.is-locked strong { color: #8b9b92; }
.day-tab.is-locked::after { content: '🔒'; position: absolute; top: 6px; right: 6px; font-size: 8px; line-height: 1; }
.day-tab.is-locked:hover { background: transparent; }


.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.57fr) minmax(290px, .78fr); align-items: start; gap: 24px; }
.dashboard-main, .dashboard-rail { display: grid; gap: 24px; min-width: 0; }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.today-card { overflow: hidden; }
.card-heading { padding: 24px 27px 22px; align-items: center; }
.number-label { display: block; margin-bottom: 9px; color: #a6b2aa; font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.duration-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; color: #71877d; border-radius: 999px; background: #f3f7f2; font-size: 10px; font-weight: 700; }
.duration-pill .icon { width: 12px; height: 12px; }
.workout-hero { display: grid; grid-template-columns: minmax(230px, .94fr) minmax(280px, 1.08fr); gap: clamp(26px, 4vw, 58px); padding: 0 27px 28px; }
.workout-art { height: 280px; position: relative; overflow: hidden; border-radius: 16px; background: #d9e9fb; isolation: isolate; }
.workout-art::before { content: ''; width: 260px; height: 260px; position: absolute; right: -76px; top: -86px; border: 1px solid rgba(75, 121, 166, .17); border-radius: 50%; box-shadow: 0 0 0 25px rgba(75, 121, 166, .05), 0 0 0 51px rgba(75, 121, 166, .04); }
.art-sun { width: 119px; height: 119px; position: absolute; top: 37px; right: 32px; border-radius: 50%; background: #ffd2a8; opacity: .88; }
.art-orbit { position: absolute; left: -36px; bottom: 30px; border: 1px solid rgba(79, 128, 153, .33); border-radius: 50%; transform: rotate(-18deg); }
.orbit-one { width: 300px; height: 118px; }
.orbit-two { width: 364px; height: 145px; bottom: 9px; left: -75px; border-color: rgba(79, 128, 153, .15); }
.workout-art::after { content: ''; width: 400px; height: 74px; position: absolute; left: -50px; bottom: -31px; border-radius: 50%; background: rgba(110, 151, 174, .27); transform: rotate(-10deg); }
.art-figure { width: 114px; height: 194px; position: absolute; z-index: 2; left: 51%; bottom: 31px; transform: translateX(-50%); }
.figure-head { width: 28px; height: 28px; position: absolute; top: 0; left: 45px; border-radius: 50%; background: #273c39; }
.figure-body { width: 49px; height: 88px; position: absolute; top: 31px; left: 34px; background: #273c39; border-radius: 48% 48% 35% 35%; transform: rotate(13deg); }
.figure-arm { width: 17px; height: 89px; position: absolute; top: 40px; left: 16px; background: #273c39; border-radius: 30px; transform: rotate(24deg); }
.figure-leg { width: 20px; height: 101px; position: absolute; top: 100px; left: 60px; background: #273c39; border-radius: 30px; transform: rotate(-16deg); }
.art-label { position: absolute; z-index: 3; right: 22px; bottom: 18px; color: rgba(39, 60, 57, .65); font-size: 9px; font-weight: 700; line-height: 1.3; letter-spacing: .13em; }
.workout-info { align-self: center; padding: 6px 0 0; }
.type-tag { color: #8aa39b; font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.workout-info h3 { margin: 16px 0 12px; font: 600 clamp(28px, 3vw, 41px)/.98 'Space Grotesk', sans-serif; letter-spacing: -.07em; }
.workout-info p { max-width: 390px; margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }
.workout-meta { display: flex; flex-wrap: wrap; gap: 19px; margin: 24px 0 25px; color: #84958c; font-size: 10px; }
.workout-meta b { margin-right: 4px; color: var(--ink); font-size: 13px; font-weight: 700; }
.dark-button { color: #f8fbf5; background: var(--dark-card); box-shadow: 0 8px 14px rgba(20, 45, 38, .13); }
.dark-button .icon { width: 13px; height: 13px; }
.start-workout.is-completed { color: #31552e; border: 1px solid #b9d996; background: #e9f7d7; box-shadow: none; }
.start-workout.is-paused { color: #31552e; border: 1px solid #c9dfb2; background: #f3fae8; box-shadow: none; }
.start-workout:disabled { cursor: default; opacity: 1; }
.exercise-preview { display: flex; align-items: center; gap: 20px; padding: 18px 27px 20px; border-top: 1px solid var(--line); }
.preview-label { align-self: flex-start; padding-top: 5px; color: #acb8b0; font-size: 8px; font-weight: 700; letter-spacing: .14em; white-space: nowrap; }
.exercise-list { flex: 1; min-width: 0; display: flex; gap: 16px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-inline: contain; }
.exercise-list::-webkit-scrollbar { display: none; }
.exercise-list > div { min-width: 175px; flex: 0 0 175px; display: grid; grid-template-columns: 25px 1fr; align-items: center; column-gap: 8px; }
.exercise-num { grid-row: 1 / 3; width: 25px; height: 25px; display: grid; place-items: center; color: #7fa653; border-radius: 50%; background: #eaf7d3; font-size: 9px; font-weight: 700; }
.exercise-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.exercise-time { color: var(--muted); font-size: 9px; }
.circle-arrow { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; color: var(--ink); border: 1px solid var(--line); border-radius: 50%; background: #fff; transition: .2s ease; }
.circle-arrow .icon { width: 14px; height: 14px; }
.circle-arrow:hover { color: #fff; border-color: var(--dark-card); background: var(--dark-card); transform: translateX(2px); }
.circle-arrow.is-return .icon { transform: rotate(180deg); }

.meals-card { padding-bottom: 9px; }
.meals-heading { padding-bottom: 19px; }
.view-all { color: #779559; }
.macro-row { display: grid; grid-template-columns: auto minmax(90px, 1fr) auto; align-items: center; gap: 14px; padding: 14px 27px 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #8b9a92; font-size: 9px; }
.macro-row > div:first-child { white-space: nowrap; }
.macro-row > div:first-child span { color: var(--ink); font-size: 13px; font-weight: 700; }
.macro-track { height: 6px; overflow: hidden; border-radius: 8px; background: #edf1eb; }
.macro-track span { height: 100%; display: block; border-radius: inherit; background: var(--coral); }
.macro-breakdown { display: flex; gap: 10px; white-space: nowrap; }
.macro-breakdown span { display: inline-flex; align-items: center; gap: 4px; }
.macro-breakdown i { width: 5px; height: 5px; display: inline-block; border-radius: 50%; }
.protein-dot { background: var(--coral); }.carbs-dot { background: #6a9ed2; }.fat-dot { background: #9ac866; }
.meal-list { padding: 0 27px; }
.meal-row { min-height: 70px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #eef2ed; }
.meal-row:last-child { border: 0; }
.meal-icon { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; font-size: 17px; }
.breakfast { color: #d68155; background: #fff0dd; }.lunch { color: #77984c; background: #ecf6d9; }.snack { color: #b176b9; background: #f6e9fa; }.dinner { color: #6a9fba; background: #e8f3fb; }
.meal-copy { min-width: 0; display: grid; gap: 4px; flex: 1; }
.meal-type { color: #a2aea6; font-size: 8px; font-weight: 700; letter-spacing: .09em; }
.meal-type b { margin-left: 7px; color: #a7b3a9; font-weight: 500; letter-spacing: 0; }
.meal-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #253731; font-size: 11px; }
.meal-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9aa8a0; font-size: 9px; }
.meal-calories { color: #9aa8a0; font-size: 10px; white-space: nowrap; }
.meal-check { width: 20px; height: 20px; display: grid; place-items: center; padding: 0; color: #fff; border: 1px solid #d7e2d8; border-radius: 50%; background: transparent; }
.meal-check .icon { width: 12px; height: 12px; opacity: 0; }
.meal-row.is-done .meal-check { border-color: #91bb62; background: #91bb62; }
.meal-row.is-done .meal-check .icon { opacity: 1; }
.meal-check:not(.is-complete) { border: 2px solid #cbd8cf; background: #fff; color: transparent; }
.meal-check:not(.is-complete):hover { border-color: #91bb62; background: #f2f7ef; }
.meal-row.is-done .meal-copy strong { color: #9ea9a2; text-decoration: line-through; text-decoration-color: #c9d4cc; }

.dashboard-rail { grid-template-rows: auto auto auto; }
.dark-card { position: relative; overflow: hidden; color: #f8fbf4; border: 0; background: var(--dark-card); box-shadow: 0 18px 35px rgba(20, 45, 38, .1); }
.mix-card { min-height: 276px; padding: 23px 24px; }
.mix-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; }
.spark-badge { width: 29px; height: 29px; display: grid; place-items: center; color: #b5e979; border-radius: 9px; background: rgba(185, 237, 118, .13); }
.spark-badge .icon { width: 14px; height: 14px; }
.ai-label { color: #9ab49b; font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.kebab.light { color: #79988c; }
.mix-card h2 { position: relative; z-index: 2; margin: 27px 0 11px; font: 600 27px/1 'Space Grotesk', sans-serif; letter-spacing: -.06em; }
.mix-card > p { position: relative; z-index: 2; max-width: 230px; margin: 0; color: #a2b8a6; font-size: 11px; line-height: 1.45; }
.preference-chips { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0 19px; }
.preference-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 8px; color: #d0e6c4; border: 1px solid rgba(202, 233, 184, .15); border-radius: 6px; background: rgba(255,255,255,.05); font-size: 8px; }
.preference-chips i { color: #b9e979; font-style: normal; font-size: 11px; }
.light-button { position: relative; z-index: 2; min-height: 36px; padding: 0 12px; color: var(--ink); background: var(--lime); }
.light-button .icon { width: 13px; height: 13px; }
.mix-orb { position: absolute; pointer-events: none; border: 1px solid rgba(187, 237, 120, .18); border-radius: 50%; }
.orb-one { width: 250px; height: 250px; top: 40px; right: -123px; box-shadow: 0 0 0 22px rgba(187, 237, 120, .035), 0 0 0 45px rgba(187, 237, 120, .025); }
.orb-two { width: 140px; height: 140px; right: 27px; bottom: -84px; background: rgba(185, 237, 118, .05); }
.glance-card { padding-bottom: 20px; }
.glance-card .card-heading { align-items: flex-end; padding-bottom: 9px; }
.glance-card .eyebrow { margin-bottom: 7px; }
.glance-card .card-heading h2 { font-size: 17px; }
.trend-up { padding: 5px 7px; color: #779b55; border-radius: 5px; background: #edf7df; font-size: 9px; font-weight: 700; }
.mini-chart { height: 110px; position: relative; margin: 10px 28px 0; border-bottom: 1px solid #e3eae2; }
.chart-grid { position: absolute; inset: 0 0 12px; display: flex; flex-direction: column; justify-content: space-between; }
.chart-grid i { width: 100%; height: 1px; display: block; background: #eff3ee; }
.bar-set { position: absolute; inset: 10px 0 0; display: flex; align-items: end; justify-content: space-around; gap: 11px; }
.bar-set span { width: 100%; max-width: 20px; display: block; border-radius: 5px 5px 0 0; background: #dfead3; }
.bar-set span:nth-child(2), .bar-set span:nth-child(5), .bar-set span:nth-child(7) { background: #c7dfab; }
.bar-set .bar-active { position: relative; background: var(--coral); }
.bar-set .bar-active::before { content: ''; width: 5px; height: 5px; position: absolute; top: -3px; left: 50%; border: 2px solid #fff; border-radius: 50%; background: var(--coral); transform: translateX(-50%); }
.chart-labels { display: flex; justify-content: space-around; margin: 8px 27px 17px; color: #a5b0a9; font-size: 8px; font-weight: 700; }
.glance-stat { display: grid; grid-template-columns: 1fr 1fr; padding: 0 27px; }
.glance-stat > div { display: flex; align-items: center; gap: 8px; }
.glance-stat > div + div { padding-left: 17px; border-left: 1px solid var(--line); }
.glance-stat strong { font: 600 21px/.95 'Space Grotesk', sans-serif; letter-spacing: -.06em; }
.glance-stat span { color: #9aa9a0; font-size: 8px; line-height: 1.25; }
.swap-card { min-height: 85px; display: flex; align-items: center; gap: 12px; padding: 17px 18px; }
.swap-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; color: #7a9d55; border-radius: 11px; background: #ecf7d9; }
.swap-icon .icon { width: 18px; height: 18px; }
.swap-card h2 { margin: 0 0 5px; font: 600 14px/1 'Space Grotesk', sans-serif; letter-spacing: -.04em; }
.swap-card p { margin: 0; color: #93a199; font-size: 10px; }
.swap-card .circle-arrow { margin-left: auto; }

.ai-drawer { width: min(420px, calc(100vw - 22px)); height: min(650px, calc(100vh - 22px)); position: fixed; z-index: 60; top: 11px; right: 11px; display: grid; grid-template-rows: auto auto 1fr auto; padding: 28px 24px 21px; visibility: hidden; border: 1px solid rgba(218, 233, 211, .15); border-radius: 24px; color: #eaf5e4; background: #19322a; box-shadow: 0 25px 80px rgba(17, 44, 35, .3); opacity: 0; transform: translateX(26px); transition: .28s ease; min-height: 0; }
.ai-drawer.is-open { visibility: visible; opacity: 1; transform: translateX(0); }
.drawer-head { display: flex; justify-content: space-between; gap: 20px; }
.drawer-head .ai-label { display: flex; align-items: center; gap: 8px; color: #b6ceae; }
.online-dot.is-local { background: var(--coral); box-shadow: 0 0 0 3px rgba(255, 129, 109, .14); }
.drawer-head h2 { max-width: 290px; margin: 15px 0 0; font: 600 31px/1 'Space Grotesk', sans-serif; letter-spacing: -.07em; }
.drawer-close, .modal-close { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; color: #9ab49d; border: 1px solid rgba(219, 238, 215, .13); border-radius: 50%; background: transparent; }
.drawer-close:hover { color: #fff; background: rgba(255,255,255,.08); }
.drawer-intro { margin: 17px 0 21px; color: #a8c0aa; font-size: 12px; line-height: 1.5; }
.suggestions { display: flex; flex-wrap: wrap; gap: 7px; }
.suggestions button { padding: 8px 10px; color: #cde3c9; border: 1px solid rgba(215, 239, 202, .16); border-radius: 7px; background: rgba(255,255,255,.05); font-size: 10px; text-align: left; }
.suggestions button:hover { border-color: rgba(185, 237, 118, .5); background: rgba(185,237,118,.08); }
.chat-messages { display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; overflow-y: auto; overflow-x: hidden; margin: 0; padding: 8px 0; min-height: 0; height: 100%; scroll-behavior: smooth; }
.ai-drawer { align-items: stretch; }
.chat-messages::-webkit-scrollbar { width: 8px; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 999px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-bubble { max-width: 87%; padding: 12px 14px; border-radius: 14px; font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; text-align: left; }
.chat-bubble strong { color: inherit; font-weight: 800; }
.chat-bullet { display: inline-block; margin-right: 5px; color: var(--lime); }
.ai-bubble { align-self: flex-start; color: #cce0ca; border: 1px solid rgba(218, 240, 210, .1); background: rgba(255,255,255,.06); border-bottom-left-radius: 4px; }
.user-bubble { align-self: flex-end; color: var(--ink); background: var(--lime); border-bottom-right-radius: 4px; }
.ai-form { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 13px; border: 1px solid rgba(217, 239, 211, .17); border-radius: 11px; background: rgba(255,255,255,.07); }
.ai-form input { min-width: 0; flex: 1; color: #f0f7eb; border: 0; outline: 0; background: transparent; font-size: 11px; }
.ai-form input::placeholder { color: #91aa96; }
.send-button { width: 30px; height: 30px; display: grid; place-items: center; color: var(--ink); border-radius: 8px; background: var(--lime); }
.send-button .icon { width: 14px; height: 14px; }
.drawer-backdrop { position: fixed; z-index: 50; inset: 0; visibility: hidden; background: rgba(23, 44, 36, .22); opacity: 0; transition: .28s ease; }
.drawer-backdrop.is-visible { visibility: visible; opacity: 1; }

.preferences-modal { position: fixed; z-index: 70; inset: 0; display: grid; place-items: center; visibility: hidden; padding: 20px; background: rgba(17, 38, 30, .28); opacity: 0; transition: .25s ease; }
.preferences-modal.is-open { visibility: visible; opacity: 1; }
.modal-card { width: min(510px, 100%); position: relative; padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: #fbfdf9; box-shadow: 0 25px 80px rgba(18, 45, 34, .16); transform: translateY(12px); transition: .25s ease; }
.preferences-modal.is-open .modal-card { transform: translateY(0); }
.modal-close { position: absolute; top: 19px; right: 19px; color: var(--muted); border-color: var(--line); }
.modal-card > .spark-badge { margin-bottom: 21px; color: #759d4b; background: #e8f6d1; }
.modal-card h2 { max-width: 330px; margin: 0; font: 600 30px/1 'Space Grotesk', sans-serif; letter-spacing: -.07em; }
.modal-intro { margin: 10px 0 25px; color: var(--ink-soft); font-size: 12px; }
.preference-group { margin: 19px 0; }
.preference-group label { display: block; margin-bottom: 9px; color: #72857a; font-size: 10px; font-weight: 700; }
.choice-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.choice { padding: 8px 11px; color: #788b80; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 10px; }
.choice:hover { border-color: #bedb9e; }
.choice.is-selected { color: #57783a; border-color: #c5e299; background: #edf9d8; font-weight: 700; }
.save-preferences { width: 100%; margin-top: 9px; }
.save-preferences .icon { width: 13px; height: 13px; }

.search-modal { position: fixed; z-index: 80; inset: 0; display: grid; place-items: start center; visibility: hidden; padding: 12vh 20px 20px; background: rgba(17, 38, 30, .28); opacity: 0; transition: .25s ease; }
.search-modal.is-open { visibility: visible; opacity: 1; }
.search-modal.is-open .search-card { transform: translateY(0); }
.search-card { width: min(620px, 100%); transform: translateY(-12px); }
.search-badge { color: #759d4b; background: #e8f6d1; }
.search-form { display: flex; align-items: center; gap: 10px; height: 48px; margin-top: 20px; padding: 0 10px 0 14px; border: 1px solid #dce7d9; border-radius: 11px; background: #fff; }
.search-form:focus-within { border-color: #a9d27e; box-shadow: 0 0 0 3px rgba(169, 210, 126, .16); }
.search-form > .icon { width: 17px; height: 17px; flex: 0 0 auto; color: #7d9d68; }
.search-form input { min-width: 0; flex: 1; height: 100%; color: var(--ink); border: 0; outline: 0; background: transparent; font-size: 13px; }
.search-form input::-webkit-search-cancel-button { display: none; }
.search-form input::placeholder { color: #9aa9a0; }
.search-clear { padding: 5px 8px; color: #759d4b; border: 0; border-radius: 6px; background: #edf8df; font-size: 10px; font-weight: 700; }
.search-results { display: grid; gap: 8px; max-height: min(390px, 48vh); overflow: auto; margin-top: 16px; padding-right: 2px; }
.search-result { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 11px; width: 100%; padding: 11px 12px; color: var(--ink); border: 1px solid #e3ece0; border-radius: 11px; background: #fff; text-align: left; }
.search-result:hover, .search-result:focus-visible { border-color: #b9d98e; background: #f5faef; outline: 0; }
.search-result-icon { width: 34px; height: 34px; display: grid; place-items: center; color: #759d4b; border-radius: 9px; background: #edf8df; }
.search-result-icon .icon { width: 16px; height: 16px; }
.search-result-copy { min-width: 0; }
.search-result-copy strong, .search-result-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-copy strong { font: 600 13px/1.2 'Space Grotesk', sans-serif; }
.search-result-copy small { margin-top: 4px; color: #91a197; font-size: 10px; }
.search-result-arrow { width: 15px; height: 15px; color: #7b9d5a; }
.search-empty { margin: 11px 2px 2px; color: #8d9d93; font-size: 11px; }

.notifications-modal { position: fixed; z-index: 80; inset: 0; display: grid; place-items: start end; visibility: hidden; padding: 78px 20px 20px; background: rgba(17, 38, 30, .12); opacity: 0; transition: .25s ease; }
.notifications-modal.is-open { visibility: visible; opacity: 1; }
.notifications-modal.is-open .notifications-card { transform: translateY(0); }
.notifications-card { width: min(420px, 100%); max-height: min(590px, calc(100vh - 100px)); overflow: auto; transform: translateY(-12px); }
.notifications-title-row { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding-right: 28px; }
.notifications-title-row h2 { margin: 7px 0 0; }
.notifications-clear { margin-top: 8px; color: #759d4b; font-size: 10px; white-space: nowrap; }
.notifications-clear:hover { color: #527c36; }
.notification-list { display: grid; gap: 8px; margin-top: 5px; }
.notification-item { display: grid; grid-template-columns: 35px minmax(0, 1fr); align-items: start; gap: 11px; width: 100%; padding: 12px; color: var(--ink); border: 1px solid #e3ece0; border-radius: 11px; background: #fff; text-align: left; }
.notification-item:hover, .notification-item:focus-visible { border-color: #b9d98e; background: #f5faef; outline: 0; }
.notification-item.is-unread { border-color: #d0e8b2; background: #f7fceb; }
.notification-icon { width: 35px; height: 35px; display: grid; place-items: center; color: #759d4b; border-radius: 9px; background: #edf8df; }
.notification-icon .icon { width: 16px; height: 16px; }
.notification-copy strong, .notification-copy small { display: block; }
.notification-copy strong { font: 600 12px/1.25 'Space Grotesk', sans-serif; }
.notification-copy small { margin-top: 5px; color: #91a197; font-size: 10px; line-height: 1.4; }
.notification-empty { margin: 14px 2px 3px; color: #8d9d93; font-size: 11px; }

.help-modal { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; visibility: hidden; padding: 20px; background: rgba(17, 38, 30, .28); opacity: 0; transition: .25s ease; }
.help-modal.is-open { visibility: visible; opacity: 1; }
.help-modal.is-open .help-card { transform: translateY(0); }
.help-card { width: min(610px, 100%); max-height: min(720px, calc(100vh - 40px)); overflow: auto; transform: translateY(12px); }
.help-card h2 { max-width: none; }
.help-sections { display: grid; gap: 8px; margin-top: 3px; }
.help-sections details { border: 1px solid #e0ebdc; border-radius: 11px; background: #fff; }
.help-sections summary { position: relative; padding: 13px 39px 13px 14px; color: #263b31; cursor: pointer; font: 600 12px/1.35 'Space Grotesk', sans-serif; list-style: none; }
.help-sections summary::-webkit-details-marker { display: none; }
.help-sections summary::after { position: absolute; top: 50%; right: 15px; color: #7b9c5c; content: '+'; font-size: 18px; font-weight: 400; transform: translateY(-52%); }
.help-sections details[open] summary::after { content: '−'; }
.help-sections p { margin: -1px 14px 13px; color: #74867a; font-size: 11px; line-height: 1.55; }
.help-chat-button { width: 100%; justify-content: center; margin-top: 17px; color: #587b3e; }
.help-chat-button .icon { width: 14px; height: 14px; }

.terms-modal { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; visibility: hidden; padding: 20px; background: rgba(17, 38, 30, .32); opacity: 0; transition: .25s ease; }
.terms-modal.is-open { visibility: visible; opacity: 1; }
.terms-modal.is-open .terms-card { transform: translateY(0); }
.terms-card { width: min(650px, 100%); max-height: min(720px, calc(100vh - 40px)); overflow: auto; transform: translateY(12px); }
.terms-card h2 { max-width: none; }
.terms-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #e0ebdc; border-radius: 11px; overflow: hidden; }
.terms-sections section { min-height: 133px; padding: 15px; border-right: 1px solid #e0ebdc; border-bottom: 1px solid #e0ebdc; background: #fff; }
.terms-sections section:nth-child(2n) { border-right: 0; }
.terms-sections section:nth-last-child(-n + 2) { border-bottom: 0; }
.terms-sections h3 { margin: 0; color: #263b31; font: 600 12px/1.25 'Space Grotesk', sans-serif; }
.terms-sections p { margin: 7px 0 0; color: #74867a; font-size: 10px; line-height: 1.5; }
.terms-acknowledge { width: 100%; justify-content: center; margin-top: 17px; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: 22px; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 9px; visibility: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 12px 32px rgba(20, 46, 34, .15); opacity: 0; transform: translate(-50%, 12px); transition: .25s ease; }
.toast.is-visible { visibility: visible; opacity: 1; transform: translate(-50%, 0); }
.toast-icon { width: 21px; height: 21px; display: grid; place-items: center; color: #fff; border-radius: 6px; background: #90b961; }
.toast-icon .icon { width: 12px; height: 12px; }
.toast-text { color: var(--ink); font-size: 11px; font-weight: 700; white-space: nowrap; }
.onboarding-screen { min-height: 100vh; position: relative; display: grid; place-items: center; overflow: hidden; padding: 35px 20px; background: #edf5e7; }
body:not(.onboarding-active) .onboarding-screen { display: none; }
body.onboarding-active .app-shell, body.onboarding-active .mobile-nav, body.onboarding-active .chat-launcher { display: none; }
.onboarding-orbit { position: absolute; border: 1px solid rgba(122, 164, 94, .16); border-radius: 50%; pointer-events: none; }
.orbit-a { width: 620px; height: 620px; top: -310px; right: -235px; box-shadow: 0 0 0 25px rgba(122, 164, 94, .05), 0 0 0 50px rgba(122, 164, 94, .04); }
.orbit-b { width: 420px; height: 420px; bottom: -215px; left: -190px; border-color: rgba(202, 141, 109, .12); box-shadow: 0 0 0 22px rgba(202, 141, 109, .04); }
.onboarding-shell { width: min(610px, 100%); position: relative; z-index: 1; }
.onboarding-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 51px; }
.onboarding-brand .brand { font-size: 26px; }
.onboarding-progress { width: 78px; display: flex; align-items: center; gap: 8px; margin-bottom: 35px; }
.onboarding-progress-dot { width: 7px; height: 7px; display: block; border-radius: 50%; background: #cbdac5; }
.onboarding-progress-dot.is-current { background: #7eaa56; box-shadow: 0 0 0 4px rgba(126, 170, 86, .14); }
.onboarding-progress i { width: 48px; height: 1px; display: block; background: #cbdac5; }
.onboarding-step { animation: onboarding-in .28s ease both; }
.onboarding-step[hidden] { display: none; }
.signed-in-note[hidden] { display: none; }
@keyframes onboarding-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.onboarding-kicker { display: inline-flex; align-items: center; gap: 9px; color: #88a076; font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.onboarding-kicker .spark-badge { width: 24px; height: 24px; color: #71964c; background: #e0f1c7; }
.onboarding-kicker .spark-badge .icon { width: 12px; height: 12px; }
.onboarding-step h1 { max-width: 520px; margin: 22px 0 16px; color: var(--ink); font: 600 clamp(46px, 6vw, 75px)/.91 'Space Grotesk', sans-serif; letter-spacing: -.085em; }
.onboarding-step h1 em { color: #779c55; font-style: normal; }
.onboarding-step > p { max-width: 445px; margin: 0; color: #63796c; font-size: 14px; line-height: 1.58; }
.google-login-wrap { display: grid; justify-items: start; gap: 9px; margin-top: 31px; }
.google-signin-button[hidden], .google-login[hidden] { display: none !important; }
.google-signin-button { min-height: 40px; }
.google-login { min-height: 50px; display: inline-flex; align-items: center; gap: 12px; padding: 0 14px 0 10px; color: #21342c; border: 1px solid #dce7d9; border-radius: 11px; background: #fff; box-shadow: 0 10px 22px rgba(46, 73, 51, .07); font-size: 12px; font-weight: 700; text-decoration: none; transition: .2s ease; }
.google-login:hover { transform: translateY(-2px); box-shadow: 0 13px 27px rgba(46, 73, 51, .11); }
.google-g { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid #e1e8f3; border-radius: 7px; }
.google-login .icon { width: 14px; height: 14px; margin-left: 17px; color: #7d9d69; }
.login-note { color: #98a89d; font-size: 9px; }
.onboarding-trust { display: flex; flex-wrap: wrap; gap: 19px; margin-top: 53px; color: #87998b; font-size: 9px; }
.onboarding-trust span { display: inline-flex; align-items: center; gap: 5px; }
.onboarding-trust .icon { width: 12px; height: 12px; color: #7eaa56; }
.onboarding-profile { max-width: 610px; }
.signed-in-note { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px; padding: 8px 10px; color: #6e875d; border-radius: 7px; background: #e2f2d1; font-size: 10px; }
.signed-in-note .online-dot { width: 5px; height: 5px; }
.onboarding-profile h1 { margin-top: 16px; font-size: clamp(40px, 5vw, 61px); }
.onboarding-profile > p { max-width: 530px; font-size: 12px; }
.onboarding-form { margin-top: 25px; }
.form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.onboarding-form label { display: grid; gap: 7px; color: #6d8174; font-size: 10px; font-weight: 700; }
.onboarding-form label small { color: #a1afa5; font-size: 9px; font-weight: 500; }
.onboarding-form input, .onboarding-form select, .onboarding-form textarea { width: 100%; color: var(--ink); border: 1px solid #dbe7d8; outline: 0; border-radius: 9px; background: rgba(255,255,255,.78); font-size: 12px; }
.onboarding-form input { height: 42px; padding: 0 12px; }
.onboarding-form select { height: 42px; padding: 0 9px; }
.onboarding-form textarea { min-height: 60px; resize: vertical; padding: 11px 12px; line-height: 1.35; }
.onboarding-form input:focus, .onboarding-form select:focus, .onboarding-form textarea:focus { border-color: #a9d27e; box-shadow: 0 0 0 3px rgba(169, 210, 126, .18); }
.onboarding-form input::placeholder, .onboarding-form textarea::placeholder { color: #b3bdb6; }
.form-section-label { margin: 23px 0 10px; color: #90a097; font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.form-section-label small { margin-left: 7px; color: #aeb9b1; font-weight: 500; letter-spacing: 0; }
.wide-field { margin-top: 10px; }
.goal-choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.goal-choice { min-height: 86px; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: 1fr 1fr; align-items: center; column-gap: 9px; padding: 11px; color: var(--ink); border: 1px solid #dbe7d8; border-radius: 10px; background: rgba(255,255,255,.64); text-align: left; transition: .2s ease; }
.goal-choice:hover { border-color: #afd48b; background: #f8fcf2; }
.goal-choice.is-selected { border-color: #a9d27e; background: #eaf7d6; box-shadow: inset 0 0 0 1px #a9d27e; }
.goal-choice-icon { width: 29px; height: 29px; grid-row: 1 / 3; display: grid; place-items: center; border-radius: 9px; }
.goal-choice-icon .icon { width: 14px; height: 14px; }
.goal-choice strong { align-self: end; font-size: 10px; }
.goal-choice small { align-self: start; color: #92a098; font-size: 8px; }
.consent-check { display: flex !important; grid-template-columns: none !important; align-items: flex-start; gap: 8px !important; margin-top: 19px; color: #829288 !important; font-size: 9px !important; font-weight: 500 !important; line-height: 1.4; }
.consent-check input { width: 14px; height: 14px; flex: 0 0 auto; margin: 0; accent-color: #80a95a; }
.terms-consent { flex-wrap: wrap; margin-top: 11px; }
.terms-consent label { display: inline !important; color: inherit !important; font: inherit !important; }
.legal-link { display: inline; padding: 0; color: #5d8b3c; border: 0; border-bottom: 1px solid #9cc77a; border-radius: 0; background: transparent; font: inherit; font-weight: 700; }
.legal-link:hover { color: #3c6b26; }
.onboarding-submit { width: 100%; margin-top: 18px; }
.onboarding-submit[disabled] { cursor: wait; opacity: .65; }
.chat-launcher { position: fixed; z-index: 25; right: 28px; bottom: 24px; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; color: #eaf5e4; border: 1px solid rgba(185, 237, 118, .22); border-radius: 13px; background: var(--dark-card); box-shadow: 0 14px 32px rgba(20, 45, 38, .18); text-align: left; transition: .2s ease; }
.chat-launcher:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(20, 45, 38, .24); }
.chat-launcher-icon { width: 29px; height: 29px; display: grid; place-items: center; color: var(--ink); border-radius: 9px; background: var(--lime); }
.chat-launcher-icon .icon { width: 14px; height: 14px; }
.chat-launcher > span:last-child { display: grid; gap: 3px; }
.chat-launcher strong { font-size: 10px; }
.chat-launcher small { color: #a6c0aa; font-size: 8px; }

.page-panel { display: none; }
.page-panel.is-visible { display: block; }
.page-intro-row { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-bottom: 35px; }
.page-intro-row > div { max-width: 680px; }
.page-intro-row h1 { margin: 0; font: 600 clamp(37px, 4.25vw, 61px)/.98 'Space Grotesk', sans-serif; letter-spacing: -.072em; }
.page-intro-row h1 em { color: #76994f; font-style: normal; }
.page-intro-row p:not(.eyebrow) { max-width: 540px; margin: 17px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }
.page-intro-row .primary-button, .page-intro-row .outline-button { flex: 0 0 auto; }
.profile-page-intro { align-items: center; }
.profile-account-summary { min-width: 205px; display: flex; align-items: center; gap: 11px; padding: 12px 15px; }
.profile-account-summary > div:last-child { min-width: 0; display: grid; gap: 4px; }
.profile-account-summary strong { overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.profile-account-summary span { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.profile-page-avatar { width: 38px; height: 38px; }
.profile-page-form { overflow: hidden; margin-bottom: 30px; padding-bottom: 0; }
.profile-page-form .page-card-heading { border-bottom: 1px solid var(--line); }
.profile-form-body { padding: 0 27px 27px; }
.profile-name-field { max-width: 430px; margin-top: 24px; }
.profile-name-field small { display: block; margin-top: 7px; color: #8da080; font-size: 9px; }
.profile-page-form .form-section-label { margin-top: 25px; }
.profile-page-form .form-grid { margin-bottom: 12px; }
.profile-page-form .wide-field { margin-bottom: 12px; }
.profile-consent { display: flex; align-items: flex-start; gap: 9px; margin-top: 23px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.profile-consent input { width: 15px; height: 15px; flex: 0 0 auto; margin: 0; accent-color: #8fbd5d; }
  .profile-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 24px; padding-top: 19px; border-top: 1px solid var(--line); }
.profile-form-footer .profile-save-status { color: #8da080; font-size: 9px; }
.privacy-page-intro { align-items: center; }
.privacy-card { overflow: hidden; margin-bottom: 30px; }
.privacy-card-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding: 24px 27px 20px; border-bottom: 1px solid var(--line); }
.privacy-card-heading h2 { margin: 7px 0 0; font: 600 24px/1 'Space Grotesk', sans-serif; letter-spacing: -.06em; }
.privacy-updated { flex: 0 0 auto; margin-top: 5px; color: #8da080; font-size: 9px; }
.privacy-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 20px 27px; border-bottom: 1px solid var(--line); background: #f5faef; }
.privacy-summary p { margin: 0; color: #60766a; font-size: 11px; line-height: 1.55; }
.privacy-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.privacy-sections section { min-height: 156px; padding: 22px 27px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.privacy-sections section:nth-child(2n) { border-right: 0; }
.privacy-sections h3 { margin: 0; color: var(--ink); font: 600 13px/1.2 'Space Grotesk', sans-serif; letter-spacing: -.035em; }
.privacy-sections p { margin: 9px 0 0; color: #7d8e84; font-size: 10px; line-height: 1.55; }
.privacy-contact { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 21px 27px; border-bottom: 1px solid var(--line); background: #f5faef; }
.privacy-contact > div:first-child { max-width: 480px; }
.privacy-contact h3 { margin: 7px 0 0; color: var(--ink); font: 600 15px/1.15 'Space Grotesk', sans-serif; letter-spacing: -.04em; }
.privacy-contact p:not(.eyebrow) { margin: 8px 0 0; color: #72867a; font-size: 10px; line-height: 1.5; }
.privacy-contact-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.privacy-contact-links a { padding: 8px 10px; color: #547a39; border: 1px solid #cfe3ba; border-radius: 8px; background: #fff; font-size: 9px; font-weight: 700; text-decoration: none; }
.privacy-contact-links a:hover { border-color: #a8ce82; background: #edf8df; }
.privacy-note { display: flex; align-items: flex-start; gap: 9px; padding: 18px 27px; color: #7b8f81; background: #fbfdf9; font-size: 10px; line-height: 1.5; }
.privacy-note strong { flex: 0 0 auto; color: #597e3d; }
.metric-row, .progress-kpi-grid, .nutrition-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-bottom: 24px; }
.today-signal-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; }
.today-signal { min-height: 106px; padding: 17px 19px; }
.today-signal strong { display: block; margin-top: 13px; font: 600 25px/.9 'Space Grotesk', sans-serif; letter-spacing: -.07em; }
.today-signal p { margin: 7px 0 0; color: #96a69d; font-size: 9px; }
.metric-card { min-height: 143px; position: relative; overflow: hidden; padding: 20px 21px; }
.metric-label { display: block; color: #a1ada5; font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.metric-card strong { display: block; margin-top: 16px; font: 600 29px/.9 'Space Grotesk', sans-serif; letter-spacing: -.075em; }
.metric-card strong span, .metric-card strong small { color: #9aaba0; font-size: 14px; font-weight: 500; letter-spacing: -.04em; }
.metric-card strong small { font-size: 11px; }
.metric-card p { margin: 7px 0 0; color: #99a8a0; font-size: 9px; }
.metric-progress { height: 5px; position: absolute; right: 21px; bottom: 24px; left: 21px; overflow: hidden; border-radius: 6px; background: #edf2eb; }
.metric-progress i { height: 100%; display: block; border-radius: inherit; background: var(--lime); }
.metric-sparkline { height: 28px; position: absolute; right: 20px; bottom: 18px; display: flex; align-items: end; gap: 4px; }
.metric-sparkline i { width: 5px; display: block; border-radius: 4px; background: #dcebd0; }
.metric-sparkline i:nth-child(1) { height: 8px; }.metric-sparkline i:nth-child(2) { height: 14px; }.metric-sparkline i:nth-child(3) { height: 11px; }.metric-sparkline i:nth-child(4) { height: 19px; background: #c2e5a0; }.metric-sparkline i:nth-child(5) { height: 16px; }.metric-sparkline i:nth-child(6) { height: 25px; background: #91bb6a; }
.metric-icon-badge { width: 29px; height: 29px; position: absolute; right: 20px; bottom: 18px; display: grid; place-items: center; color: #749a52; border-radius: 9px; background: #ecf7df; }
.metric-icon-badge .icon { width: 14px; height: 14px; }
.page-grid { display: grid; align-items: start; gap: 24px; }
.workout-page-grid, .meals-page-grid, .progress-page-grid { grid-template-columns: minmax(0, 1.45fr) minmax(280px, .7fr); }
.progression-card { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(420px, 1.35fr); align-items: center; gap: 24px; margin-bottom: 24px; padding: 22px 27px; background: #f5faef; }
.progression-card h2 { margin: 8px 0 6px; font: 600 23px/1 'Space Grotesk', sans-serif; letter-spacing: -.06em; }
.progression-copy { max-width: 320px; margin: 0; color: #829589; font-size: 10px; line-height: 1.45; }
.progression-form { display: grid; grid-template-columns: 1.3fr .7fr .55fr .55fr auto; align-items: end; gap: 8px; }
.progression-form label, .progress-log-form label { display: grid; gap: 6px; color: #7d8e84; font-size: 9px; font-weight: 700; }
.progression-form label small, .progress-log-form label small { color: #a2afa7; font-weight: 500; }
.progression-form input, .progress-log-form input { width: 100%; height: 38px; padding: 0 10px; color: var(--ink); border: 1px solid #dce7d9; border-radius: 8px; background: #fff; font-size: 11px; outline: 0; }
.progression-form input:focus, .progress-log-form input:focus { border-color: #a9d27e; box-shadow: 0 0 0 3px rgba(169, 210, 126, .16); }
.progression-form .dark-button { min-height: 38px; padding: 0 13px; white-space: nowrap; }
.progression-result { grid-column: 2; margin-top: -8px; color: #66864d; font-size: 10px; font-weight: 700; }
.detailed-workout-card { overflow: hidden; margin-bottom: 24px; }
.workout-plan-badge { padding: 7px 9px; color: #6f9650; border-radius: 6px; background: #edf7df; font-size: 8px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.workout-detail-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--line); }
.workout-detail-summary > div { display: grid; gap: 7px; min-height: 73px; padding: 17px 21px; background: #fbfdf9; }
.detail-label { display: block; color: #99a89e; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.workout-detail-summary strong { color: #2b4037; font: 600 14px/1.1 'Space Grotesk', sans-serif; letter-spacing: -.04em; }
.workout-safety-note { display: flex; align-items: baseline; gap: 9px; padding: 15px 27px; color: #66804f; background: #f5faef; font-size: 10px; line-height: 1.45; }
.workout-safety-note strong { flex: 0 0 auto; color: #4e7041; font-size: 9px; }
.workout-detail-body { display: grid; grid-template-columns: minmax(210px, .58fr) minmax(0, 1.42fr); gap: 25px; padding: 23px 27px 25px; }
.workout-detail-side { display: grid; align-content: start; gap: 17px; }
.detail-block { padding-bottom: 17px; border-bottom: 1px solid #edf1eb; }
.detail-block:last-child { border-bottom: 0; padding-bottom: 0; }
.detail-block p { margin: 8px 0 0; color: #7f9187; font-size: 10px; line-height: 1.5; }
.detail-block strong { display: block; margin-top: 8px; color: #4c7041; font-size: 11px; }
.detail-block ul { display: grid; gap: 7px; margin: 9px 0 0; padding-left: 15px; color: #7f9187; font-size: 10px; line-height: 1.45; }
.detail-progression-rule { color: #526c5b !important; font-weight: 600; }
.detail-progression-next { color: #8a9a91 !important; }
.exercise-detail-column { min-width: 0; }
.exercise-detail-heading { display: flex; justify-content: space-between; align-items: end; gap: 15px; padding-bottom: 11px; }
.exercise-detail-heading strong { display: block; margin-top: 6px; color: #2d4239; font: 600 16px/1 'Space Grotesk', sans-serif; letter-spacing: -.05em; }
.exercise-detail-heading small { color: #a0ada5; font-size: 9px; }
.exercise-detail-list { display: grid; gap: 10px; }
.exercise-detail-item { padding: 15px 16px 13px; border: 1px solid #e8eee5; border-radius: 11px; background: #fbfdf9; }
.exercise-detail-item.is-complete { border-color: #b9d996; background: #f5faef; }
.exercise-detail-top { display: flex; align-items: center; gap: 10px; }
.exercise-detail-number { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; color: #6a9250; border-radius: 8px; background: #edf7df; font-size: 9px; font-weight: 800; }
.exercise-detail-top h3 { margin: 0 0 4px; color: #253a31; font: 600 14px/1 'Space Grotesk', sans-serif; letter-spacing: -.04em; }
.exercise-detail-top p { margin: 0; color: #97a69d; font-size: 9px; }
.exercise-detail-top p span { margin: 0 3px; color: #c2cec5; }
.exercise-kind { margin-left: auto; padding: 5px 7px; color: #8b9c92; border-radius: 5px; background: #f1f5ef; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.exercise-complete { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; color: #9aaa9f; border: 1px solid #d9e5d9; border-radius: 50%; background: #fff; transition: .2s ease; }
.exercise-complete .icon { width: 14px; height: 14px; opacity: 0; }
.exercise-complete:hover { color: #6e9650; border-color: #a9d47f; background: #edf8df; }
.exercise-complete.is-complete { color: #fff; border-color: #91bb62; background: #91bb62; }
.exercise-complete.is-complete .icon { opacity: 1; }
.exercise-complete:disabled { cursor: default; opacity: 1; }
.exercise-detail-item.is-complete .exercise-detail-number { color: #fff; background: #91bb62; }
.exercise-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 13px 0 11px; }
.exercise-stat-grid > div { display: grid; gap: 5px; min-width: 0; padding: 8px; border-radius: 7px; background: #f2f7ef; }
.exercise-stat-grid span { color: #a0afa5; font-size: 7px; font-weight: 800; }
.exercise-stat-grid strong { overflow: hidden; color: #55754a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.exercise-detail-notes { display: grid; gap: 5px; padding: 9px 0; border-top: 1px solid #eef2ed; }
.exercise-detail-notes p { margin: 0; color: #7f9187; font-size: 9px; line-height: 1.45; }
.exercise-detail-notes b, .exercise-detail-footer b { color: #526d5b; }
.exercise-detail-footer { display: flex; flex-wrap: wrap; gap: 8px 17px; color: #92a098; font-size: 8px; line-height: 1.4; }
.detail-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 16px 27px 19px; border-top: 1px solid var(--line); background: #fbfdf9; }
.detail-footer > div { display: grid; gap: 6px; min-width: 0; }
.detail-tracking, .detail-volume { color: #6f8876; font-size: 9px; line-height: 1.5; }
.empty-detail { margin: 0; padding: 24px; color: #8b9b91; border: 1px dashed #dbe6d8; border-radius: 10px; font-size: 10px; text-align: center; }
.library-card, .meal-plan-full-card, .consistency-card, .wins-card { overflow: hidden; padding-bottom: 20px; }
.page-card-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 24px 27px 21px; }
.page-card-heading .eyebrow { margin-bottom: 7px; }
.page-card-heading h2 { margin: 0; font: 600 20px/1 'Space Grotesk', sans-serif; letter-spacing: -.055em; }
.page-card-heading > .icon { color: #8db966; }
.meal-plan-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.meal-plan-actions .dark-button { min-height: 36px; padding: 0 12px; font-size: 9px; }
.workout-library-list { border-top: 1px solid var(--line); }
.library-month-heading { padding: 11px 27px 8px; color: #8da080; background: #f7faf5; border-bottom: 1px solid var(--line); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.workout-library-row { width: 100%; min-height: 82px; display: flex; align-items: center; gap: 14px; padding: 10px 27px; color: var(--ink); border-bottom: 1px solid #eef2ed; background: transparent; text-align: left; transition: .2s ease; }
.workout-library-row:hover, .workout-library-row.is-selected { background: #f5faef; }
.workout-library-row.is-locked:hover { background: transparent; }
.workout-library-row.is-selected { box-shadow: inset 3px 0 0 #9aca69; }
.library-day { width: 32px; display: grid; gap: 3px; flex: 0 0 auto; color: #a2afa6; font-size: 8px; font-weight: 700; letter-spacing: .08em; text-align: center; }
.library-day strong { color: var(--ink); font: 600 17px/1 'Space Grotesk', sans-serif; letter-spacing: -.05em; }
.library-workout-icon { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; }
.library-workout-icon .icon { width: 16px; height: 16px; }
.blue-workout { color: #6699c3; background: #e7f1fb; }.coral-workout { color: #d9826e; background: #fff0eb; }.mint-workout { color: #78a156; background: #edf7df; }.yellow-workout { color: #d0965d; background: #fff3dd; }
.library-copy { min-width: 0; display: grid; gap: 5px; flex: 1; }
.library-copy strong { overflow: hidden; color: #253731; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.library-copy small { overflow: hidden; color: #9aa8a0; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.library-copy small i { margin: 0 4px; color: #c5d0c8; font-style: normal; }
.library-status { padding: 5px 7px; color: #8da07f; border-radius: 5px; background: #eff6e8; font-size: 8px; font-weight: 700; white-space: nowrap; }
.library-status.completed { color: #9ca9a1; background: #f3f5f2; }
.workout-library-row.is-complete .library-status { color: #5f8848; background: #e9f7d7; }
.workout-library-row.is-complete .library-workout-icon { color: #5f8848; background: #e9f7d7; }
.workout-library-row.is-locked { opacity: .38; cursor: not-allowed; pointer-events: none; }
.workout-library-row.is-locked .library-status { color: #9ca9a1; background: #f3f5f2; }
.workout-library-row.is-locked .library-status::before { content: '🔒 '; }
.workout-library-row.is-locked .library-arrow { opacity: 0; }
.library-arrow { width: 14px; height: 14px; color: #a1b1a6; }
.library-view-all { margin: 18px 27px 0; color: #779559; }
.next-workout-card { min-height: 367px; padding: 24px; }
.next-workout-art { height: 158px; position: relative; overflow: hidden; margin: 0 0 20px; border-radius: 15px; background: #d9e9fb; }
.next-workout-art::after { content: ''; width: 260px; height: 53px; position: absolute; left: -25px; bottom: -17px; border-radius: 50%; background: rgba(110, 151, 174, .3); transform: rotate(-10deg); }
.next-workout-art .art-sun { width: 72px; height: 72px; top: 22px; right: 24px; }
.next-workout-art > span { position: absolute; z-index: 3; right: 16px; bottom: 13px; color: rgba(39, 60, 57, .62); font-size: 7px; font-weight: 700; letter-spacing: .12em; line-height: 1.35; }
.mini-figure { width: 77px; height: 128px; bottom: 17px; transform: translateX(-50%) scale(.67); transform-origin: bottom center; }
.next-workout-card > .type-tag { color: #8aa39b; font-size: 8px; }
.next-workout-card h2 { margin: 11px 0 7px; font: 600 24px/1 'Space Grotesk', sans-serif; letter-spacing: -.06em; }
.next-workout-card > p { margin: 0 0 17px; color: #8c9b92; font-size: 10px; }
.next-workout-card .dark-button { width: 100%; }
.next-workout-card .dark-button .timer-count { margin-left: 2px; color: #bde98a; font-size: 9px; }
.nutrition-summary-grid { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .95fr); }
.nutrition-score { min-height: 180px; display: flex; align-items: center; justify-content: space-between; padding: 25px 28px; background: #ecf7df; }
.nutrition-score h2 { margin: 18px 0 7px; font: 600 31px/1 'Space Grotesk', sans-serif; letter-spacing: -.075em; }
.nutrition-score h2 span { color: #78926d; font-size: 13px; font-weight: 500; letter-spacing: -.03em; }
.nutrition-score p { max-width: 230px; margin: 0; color: #71886e; font-size: 10px; line-height: 1.45; }
.nutrition-ring { width: 116px; height: 116px; position: relative; flex: 0 0 auto; }
.nutrition-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.nutrition-ring circle { fill: none; stroke: #d3e8b4; stroke-width: 8; }
.nutrition-ring .nutrition-ring-value { stroke: #82ad58; stroke-linecap: round; stroke-dasharray: 251; stroke-dashoffset: 126; }
.nutrition-ring strong { position: absolute; inset: 0; display: grid; place-content: center; color: #4e7041; font: 600 25px/.9 'Space Grotesk', sans-serif; text-align: center; letter-spacing: -.07em; }
.nutrition-ring strong span { font-size: 11px; font-weight: 500; letter-spacing: 0; }
.macro-summary { padding-bottom: 18px; }
.macro-summary .page-card-heading { padding-bottom: 13px; }
.macro-summary-row { display: grid; grid-template-columns: 8px 1fr auto 76px; align-items: center; gap: 8px; padding: 9px 27px; color: #8c9b92; font-size: 10px; }
.macro-color { width: 6px; height: 6px; display: block; border-radius: 50%; }
.macro-summary-row strong { color: var(--ink); font-size: 10px; }
.macro-summary-row > i { height: 5px; overflow: hidden; border-radius: 5px; background: #edf2eb; }
.macro-summary-row > i b { height: 100%; display: block; border-radius: inherit; background: #90ba65; }
.macro-summary-row:nth-of-type(3) > i b { background: #6a9ed2; }.macro-summary-row:nth-of-type(4) > i b { background: var(--coral); }
.meal-plan-full-card { min-height: 410px; }
.meal-plan-list { border-top: 1px solid var(--line); }
.plan-meal-row { min-height: 76px; display: flex; align-items: center; gap: 14px; padding: 10px 27px; border-bottom: 1px solid #eef2ed; }
.plan-meal-time { width: 35px; flex: 0 0 auto; color: #9daaa3; font-size: 9px; font-variant-numeric: tabular-nums; }
.plan-meal-row .meal-icon { width: 35px; height: 35px; }
.plan-meal-row .library-copy strong { font-size: 11px; }
.plan-meal-row .library-copy small { text-transform: none; }
.page-meal-check { width: 21px; height: 21px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; color: #fff; border: 1px solid #d7e2d8; border-radius: 50%; background: transparent; }
.page-meal-check .icon { width: 12px; height: 12px; }
.page-meal-check.is-complete { border-color: #91bb62; background: #91bb62; }
.page-meal-check:not(.is-complete) { border: 2px solid #cbd8cf; background: #fff; color: transparent; }
.page-meal-check:not(.is-complete):hover { border-color: #91bb62; background: #f2f7ef; }
.manual-food-list { display: grid; gap: 8px; margin-top: 13px; }
.manual-food-inline-list { margin-top: 0; gap: 0; }
.manual-food-inline-list:empty { display: none; }
.manual-food-inline-list .manual-food-row { min-height: 76px; padding: 10px 27px; }
.manual-food-icon { color: #71964d; background: #eef7df; }
.manual-food-icon .icon { width: 13px; height: 13px; color: currentColor; }
.manual-food-copy { min-width: 0; display: grid; gap: 3px; flex: 1; }
.manual-food-copy strong { overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.manual-food-copy small { overflow: hidden; color: #9aa8a0; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.manual-food-remove { width: 21px; height: 21px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; color: #a2afa7; border: 1px solid #dce7d9; border-radius: 50%; background: #fff; font-size: 13px; line-height: 1; }
.manual-food-remove:hover { color: #c86e59; border-color: #efb7aa; background: #fff6f3; }
.food-log-modal { position: fixed; z-index: 70; inset: 0; display: grid; place-items: center; visibility: hidden; padding: 20px; background: rgba(17, 38, 30, .28); opacity: 0; transition: .25s ease; }
.food-log-modal.is-open { visibility: visible; opacity: 1; }
.food-log-modal.is-open .food-log-card { transform: translateY(0); }
.food-log-card { transform: translateY(12px); }
.food-log-form { display: grid; gap: 12px; margin-top: 20px; }
.food-log-form label { display: grid; gap: 6px; color: #72857a; font-size: 10px; font-weight: 700; }
.food-log-form label small { color: #a1afa5; font-size: 9px; font-weight: 500; }
.food-log-form input, .food-log-form select { width: 100%; height: 38px; padding: 0 10px; color: var(--ink); border: 1px solid #dce7d9; border-radius: 8px; background: #fff; font-size: 11px; outline: 0; }
.food-log-form input:focus, .food-log-form select:focus { border-color: #a9d27e; box-shadow: 0 0 0 3px rgba(169, 210, 126, .16); }
.food-log-macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.food-log-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.grocery-modal { position: fixed; z-index: 70; inset: 0; display: grid; place-items: center; visibility: hidden; padding: 20px; background: rgba(17, 38, 30, .28); opacity: 0; transition: .25s ease; }
.grocery-modal.is-open { visibility: visible; opacity: 1; }
.grocery-modal.is-open .grocery-list-modal-card { transform: translateY(0); }
.grocery-list-modal-card { max-height: min(660px, calc(100vh - 40px)); overflow: auto; transform: translateY(12px); }
.grocery-modal-badge { color: #759d4b; background: #e8f6d1; }
.grocery-list-summary { display: flex; justify-content: space-between; gap: 12px; margin: 20px 0 5px; color: #819187; font-size: 10px; }
.grocery-list-summary strong { color: var(--ink); font-size: 12px; }
.grocery-add-form { display: grid; gap: 7px; margin-top: 18px; }
.grocery-add-form > label { color: #72857a; font-size: 10px; font-weight: 700; }
.grocery-add-row { display: flex; align-items: center; gap: 7px; }
.grocery-add-row input { min-width: 0; flex: 1; height: 38px; padding: 0 10px; color: var(--ink); border: 1px solid #dce7d9; border-radius: 8px; background: #fff; font-size: 11px; outline: 0; }
.grocery-add-row input:focus { border-color: #a9d27e; box-shadow: 0 0 0 3px rgba(169, 210, 126, .16); }
.grocery-add-row .primary-button { min-height: 38px; padding: 0 12px; white-space: nowrap; }
.grocery-add-row .primary-button .icon { width: 13px; height: 13px; }
.grocery-items { display: grid; gap: 0; border-top: 1px solid #e8eee5; }
.grocery-item-row { display: flex; align-items: center; gap: 10px; min-height: 54px; border-bottom: 1px solid #eef2ed; }
.grocery-item-row > span { min-width: 0; display: grid; gap: 3px; flex: 1; }
.grocery-item-row strong { overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.grocery-item-row small { color: #9aa8a0; font-size: 9px; }
.grocery-item-row.is-checked strong { color: #9da9a1; text-decoration: line-through; text-decoration-color: #c9d4cc; }
.grocery-item-check { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; color: transparent; border: 2px solid #cbd8cf; border-radius: 50%; background: #fff; }
.grocery-item-check:hover { border-color: #91bb62; background: #f2f7ef; }
.grocery-item-check.is-checked { color: #fff; border-color: #91bb62; background: #91bb62; }
.grocery-item-check .icon { width: 12px; height: 12px; }
.grocery-item-remove { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; color: #9aa9a0; border: 1px solid #dce7d9; border-radius: 50%; background: #fff; font-size: 14px; line-height: 1; }
.grocery-item-remove:hover { color: #c86e59; border-color: #efb7aa; background: #fff6f3; }
.grocery-empty { margin: 15px 0; color: #9aa8a0; font-size: 10px; }
.grocery-modal-done { width: 100%; margin-top: 17px; }
.grocery-modal-done .icon { width: 13px; height: 13px; }
.grocery-button { margin: 18px 27px 0; }
.grocery-card { min-height: 410px; position: relative; overflow: hidden; padding: 24px; background: #fff7e8; }
.grocery-card h2 { position: relative; z-index: 1; margin: 0 0 13px; font: 600 27px/1 'Space Grotesk', sans-serif; letter-spacing: -.07em; }
.grocery-card h2 em { color: #bd8f5d; font-style: normal; }
.grocery-card > p:not(.eyebrow) { position: relative; z-index: 1; max-width: 220px; margin: 0; color: #a1876b; font-size: 11px; line-height: 1.5; }
.grocery-illustration { width: 126px; height: 126px; position: absolute; right: -13px; top: -13px; border: 1px solid rgba(202, 154, 90, .23); border-radius: 50%; box-shadow: 0 0 0 17px rgba(202, 154, 90, .07), 0 0 0 34px rgba(202, 154, 90, .05); }
.grocery-illustration span { position: absolute; left: 40px; top: 34px; color: #bc8a54; font: 600 38px 'Space Grotesk', sans-serif; transform: rotate(-12deg); }
.grocery-illustration i, .grocery-illustration b { position: absolute; display: block; border-radius: 50%; background: #f0c085; }
.grocery-illustration i { width: 16px; height: 16px; left: 26px; bottom: 25px; }.grocery-illustration b { width: 22px; height: 22px; right: 22px; bottom: 19px; background: #a9c27d; }
.grocery-progress { position: absolute; right: 24px; bottom: 74px; left: 24px; }
.grocery-progress span { display: block; margin-bottom: 8px; color: #9d876c; font-size: 9px; }
.grocery-progress span b { color: #806541; font-size: 12px; }
.grocery-progress > i { height: 6px; display: block; overflow: hidden; border-radius: 7px; background: #f0e2c9; }
.grocery-progress > i b { height: 100%; display: block; border-radius: inherit; background: #c49a63; }
.grocery-card .grocery-button { position: absolute; bottom: 24px; left: 24px; margin: 0; color: #95734d; }
.grocery-card .grocery-button .icon { width: 13px; height: 13px; }
.progress-kpi-grid { grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(180px, .7fr)); }
.progress-intelligence-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 15px; margin-bottom: 24px; }
.composition-card, .adaptive-card { min-height: 183px; padding: 22px 27px; }
.composition-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 21px; }
.composition-stats div { display: grid; gap: 6px; }
.composition-stats span { color: #9aa9a0; font-size: 8px; font-weight: 700; letter-spacing: .09em; }
.composition-stats strong { color: var(--ink); font: 600 22px/.9 'Space Grotesk', sans-serif; letter-spacing: -.07em; }
.composition-note { margin: 15px 0 0; color: #91a098; font-size: 9px; line-height: 1.4; }
.adaptive-card h2 { max-width: 260px; margin: 8px 0 0; font: 600 23px/1 'Space Grotesk', sans-serif; letter-spacing: -.06em; }
.adaptive-message { max-width: 410px; margin: 20px 0 18px; color: #809287; font-size: 10px; line-height: 1.5; }
.adaptation-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #759257; font-size: 9px; font-weight: 700; }
.recovery-state { padding: 6px 9px; color: #6e8d51; border-radius: 999px; background: #edf7df; }
.progress-log-card { margin-bottom: 24px; padding: 22px 27px; }
.progress-log-form { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 12px; }
.progress-log-form .primary-button { min-height: 38px; }
.log-status { color: #8da080; font-size: 9px; font-weight: 700; }
.measurement-log-card { margin-bottom: 24px; padding: 22px 27px; }
.measurement-form { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 12px; }
.measurement-form label { display: grid; gap: 6px; color: #7d8e84; font-size: 9px; font-weight: 700; }
.measurement-form label small { color: #a2afa7; font-weight: 500; }
.measurement-form input { width: 100%; height: 38px; padding: 0 10px; color: var(--ink); border: 1px solid #dce7d9; border-radius: 8px; background: #fff; font-size: 11px; outline: 0; }
.measurement-form input:focus { border-color: #a9d27e; box-shadow: 0 0 0 3px rgba(169, 210, 126, .16); }
.measurement-form .outline-button { min-height: 38px; }
.progress-hero-card { min-height: 184px; display: flex; align-items: center; justify-content: space-between; padding: 25px 28px; border-radius: var(--radius); }
.progress-hero-card h2 { margin: 15px 0 8px; color: #eff8ea; font: 600 38px/1 'Space Grotesk', sans-serif; letter-spacing: -.08em; }
.progress-hero-card h2 span { color: #9fb99b; font-size: 14px; font-weight: 500; letter-spacing: -.03em; }
.progress-hero-card p { max-width: 210px; margin: 0; color: #a7bfaa; font-size: 10px; line-height: 1.45; }
.hero-score-ring { width: 106px; height: 106px; position: relative; flex: 0 0 auto; }
.hero-score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hero-score-ring circle { fill: none; stroke: rgba(188, 231, 153, .16); stroke-width: 8; }
.hero-score-ring .hero-score-value { stroke: #b9ed76; stroke-linecap: round; stroke-dasharray: 258; stroke-dashoffset: 46; }
.hero-score-ring span { position: absolute; inset: 0; display: grid; place-content: center; color: #cbe9b7; font-size: 8px; font-weight: 700; line-height: 1.35; text-align: center; letter-spacing: .1em; }
.progress-small-card { min-height: 184px; padding: 23px; }
.progress-small-card > strong { display: block; margin-top: 17px; font: 600 34px/.9 'Space Grotesk', sans-serif; letter-spacing: -.08em; }
.progress-small-card > p { margin: 7px 0 0; color: #94a49b; font-size: 10px; }
.progress-icon-line { display: flex; align-items: center; justify-content: space-between; margin-top: 25px; color: #7a9b59; font-size: 9px; }
.progress-icon-line .icon { width: 17px; height: 17px; }
.consistency-card { min-height: 380px; }
.large-chart { height: 228px; position: relative; margin: 14px 27px 0; border-bottom: 1px solid var(--line); }
.large-chart-grid { position: absolute; inset: 0 0 16px; display: flex; flex-direction: column; justify-content: space-between; }
.large-chart-grid i { width: 100%; height: 1px; display: block; background: #eff3ee; }
.large-bars { position: absolute; inset: 10px 0 0; display: flex; align-items: end; justify-content: space-between; gap: 9px; }
.large-bars span { width: 100%; max-width: 28px; position: relative; display: block; border-radius: 5px 5px 0 0; background: #dcebd2; }
.large-bars span:nth-child(2n) { background: #c7dfab; }
.large-bars .large-bar-active { background: var(--coral); }
.large-bars span b { position: absolute; top: -17px; left: 50%; color: #9aa9a0; font-size: 8px; font-weight: 700; transform: translateX(-50%); }
.large-bars .large-bar-active b { color: var(--coral); }
.large-chart-labels { display: flex; justify-content: space-between; padding: 10px 27px 0; color: #a1ada5; font-size: 8px; font-weight: 700; }
.wins-card { min-height: 380px; padding-bottom: 18px; }
.wins-card .page-card-heading { padding-bottom: 13px; }
.win-row { display: flex; align-items: center; gap: 11px; padding: 14px 27px; border-top: 1px solid #eef2ed; }
.win-icon { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; }
.win-icon .icon { width: 14px; height: 14px; }
.green-win { color: #82ab5b; background: #edf7e1; }.coral-win { color: #d8806e; background: #fff0eb; }.blue-win { color: #6e9cc1; background: #e9f3fc; }
.win-row > div { min-width: 0; display: grid; gap: 5px; }
.win-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.win-row small { color: #a0ada5; font-size: 9px; }
.progress-reflection { margin: 14px 27px 0; color: #779559; }
.progress-range-button.is-selected { color: #57783a; border-color: #c5e299; background: #edf9d8; }

@media (max-width: 1120px) {
  .sidebar { width: 215px; }
  .main-content { width: calc(100% - 215px); margin-left: 215px; }
  .content-wrap { padding-right: 28px; padding-left: 28px; }
  .workout-hero { gap: 24px; }
  .workout-art { height: 250px; }
  .macro-row { grid-template-columns: auto 1fr; }
  .macro-breakdown { grid-column: 1 / -1; }
  .dashboard-grid { grid-template-columns: minmax(0, 1.35fr) minmax(275px, .75fr); }
}

@media (min-width: 769px) and (max-width: 880px) {
  .sidebar { width: 78px; padding: 28px 12px 20px; align-items: center; }
  .brand-lockup { padding: 0 0 48px; }
  .brand { font-size: 0; }
  .brand-beta, .nav-item span, .nav-label, .upgrade-card, .sidebar-user > div:nth-child(2), .more-button { display: none; }
  .nav-item { width: 48px; justify-content: center; padding: 0; }
  .sidebar-divider { width: 42px; margin: 37px 0 25px; }
  .sidebar-user { padding: 0; }
  .main-content { width: calc(100% - 78px); margin-left: 78px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .mix-card { grid-row: span 2; }
  .swap-card { min-height: 100%; }
  .workout-page-grid, .meals-page-grid, .progress-page-grid { grid-template-columns: 1fr; }
  .progression-card { grid-template-columns: 1fr; }
  .workout-detail-body { grid-template-columns: 1fr; }
  .workout-detail-side { grid-template-columns: repeat(3, 1fr); }
  .detail-block { padding-bottom: 0; border-bottom: 0; }
  .progression-result { grid-column: auto; margin-top: 0; }
  .progress-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progress-hero-card { grid-column: 1 / -1; }
  .progress-intelligence-grid { grid-template-columns: 1fr; }
  .progress-log-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .measurement-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  body { padding-bottom: 72px; }
  .onboarding-screen { display: block; min-height: 100svh; padding: 24px 18px 35px; }
  .onboarding-shell { width: 100%; }
  .onboarding-brand { margin-bottom: 42px; }
  .onboarding-progress { margin-bottom: 28px; }
  .onboarding-step h1 { font-size: 46px; }
  .onboarding-step > p { font-size: 12px; }
  .onboarding-trust { gap: 10px 14px; margin-top: 38px; }
  .form-grid { gap: 7px; }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .onboarding-form input { padding: 0 9px; }
  .goal-choice-grid { gap: 6px; }
  .goal-choice { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: 112px; padding: 9px; }
  .goal-choice-icon { grid-row: auto; }
  .goal-choice strong { align-self: start; }
  .goal-choice small { align-self: start; }
  .sidebar {
    width: 280px;
    min-height: 100svh;
    position: fixed;
    z-index: 40;
    inset: 0 auto 0 0;
    transform: translateX(-100%);
    transition: transform .28s ease, box-shadow .28s ease;
    box-shadow: none;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d0dbc9 transparent;
  }
  .sidebar::-webkit-scrollbar { width: 4px; }
  .sidebar::-webkit-scrollbar-thumb { background: #c8d9c0; border-radius: 99px; }
  .sidebar::-webkit-scrollbar-track { background: transparent; }
  .sidebar.is-open {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(20, 45, 38, .18);
  }
  .sidebar-drawer-backdrop {
    position: fixed;
    z-index: 39;
    inset: 0;
    background: rgba(17, 38, 30, .3);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
  }
  .sidebar-drawer-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
  }
  .sidebar-close {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    margin-left: auto;
    place-items: center;
    padding: 0;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
  }
  .brand-lockup { padding-bottom: 28px; align-items: center; }
  .main-content { width: 100%; margin-left: 0; }
  .account-menu-backdrop { position: fixed; z-index: 49; inset: 0; display: block; background: rgba(17, 38, 30, .22); }
  .account-menu-backdrop[hidden] { display: none; }
  .account-menu { position: fixed; z-index: 50; top: 68px; right: 12px; bottom: auto; left: auto; width: min(260px, calc(100vw - 24px)); }
  .topbar { height: 66px; padding: 0 18px; }
  .mobile-menu { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; color: var(--ink); background: transparent; }
  .breadcrumb span, .breadcrumb i { display: none; }
  .topbar-actions { gap: 10px; }
  .search-button { display: none; }
  .content-wrap { padding: 31px 16px 35px; }
  .page-intro-row { display: block; padding-bottom: 28px; }
  .page-intro-row h1 { font-size: 39px; }
  .page-intro-row p:not(.eyebrow) { margin-top: 14px; font-size: 11px; }
  .page-intro-row > .primary-button, .page-intro-row > .outline-button { margin-top: 19px; }
  .welcome-row { display: block; padding-bottom: 32px; }
  .welcome-copy h1 { font-size: 40px; }
  .welcome-subtitle { margin-top: 16px; font-size: 12px; }
  .welcome-actions { gap: 11px; margin-top: 21px; }
  .primary-button, .secondary-button { min-height: 40px; padding: 0 13px; font-size: 10px; }
  .streak-card { width: 100%; margin-top: 26px; padding: 17px 18px; }
  .streak-body { margin-top: 13px; }
  .section-heading h2, .card-heading h2 { font-size: 20px; }
  .outline-button { min-height: 38px; padding: 0 10px; font-size: 9px; }
  .outline-button .icon { display: none; }
  .week-picker { gap: 3px; margin-top: 18px; padding: 4px; overflow-x: auto; }
  .day-tab { min-width: 47px; min-height: 64px; }
  .dashboard-grid { grid-template-columns: 1fr; gap: 17px; }
  .dashboard-main, .dashboard-rail { gap: 17px; }
  .card-heading { padding: 20px 18px 18px; }
  .workout-hero { display: block; padding: 0 18px 22px; }
  .workout-art { height: 222px; }
  .workout-info { padding-top: 23px; }
  .workout-info h3 { margin-top: 11px; font-size: 31px; }
  .workout-info p { font-size: 11px; }
  .workout-meta { margin: 20px 0; }
  .exercise-preview { gap: 10px; padding: 16px 18px; align-items: flex-start; }
  .preview-label { display: none; }
  .exercise-list { display: flex; gap: 11px; }
  .exercise-list > div { min-width: 150px; flex-basis: 150px; grid-template-columns: 25px 1fr; }
  .exercise-list .exercise-time { grid-column: 2; grid-row: 2; }
  .exercise-list strong { align-self: center; }
  .macro-row { gap: 9px; padding: 13px 18px 15px; }
  .meal-list { padding: 0 18px; }
  .meal-row { min-height: 76px; gap: 9px; }
  .meal-icon { width: 31px; height: 31px; }
  .meal-calories { display: none; }
  .dashboard-rail { display: grid; grid-template-columns: 1fr; }
  .workout-page-grid, .meals-page-grid, .progress-page-grid { grid-template-columns: 1fr; }
  .progression-card { grid-template-columns: 1fr; }
  .workout-detail-body { grid-template-columns: 1fr; }
  .progress-intelligence-grid { grid-template-columns: 1fr; }
  .mix-card { grid-row: auto; min-height: 260px; }
  .glance-card { min-height: 260px; }
  .swap-card { min-height: 85px; }
  .today-signal-row, .metric-row, .nutrition-summary-grid, .progress-kpi-grid { grid-template-columns: 1fr; gap: 12px; }
  .metric-card { min-height: 125px; }
  .progress-hero-card { grid-column: auto; min-height: 180px; }
  .progress-small-card { min-height: 140px; }
  .progress-icon-line { margin-top: 17px; }
  .page-card-heading { padding: 20px 18px 18px; }
  .page-card-heading h2 { font-size: 19px; }
  .page-card-heading .outline-button { min-height: 36px; }
  .meal-plan-actions { width: 100%; justify-content: flex-start; }
  .meal-plan-actions button { flex: 1; }
  .workout-library-row, .plan-meal-row, .manual-food-inline-list .manual-food-row, .win-row { padding-right: 18px; padding-left: 18px; }
  .workout-library-row { gap: 9px; }
  .library-status { display: none; }
  .library-view-all, .progress-reflection { margin-left: 18px; }
  .next-workout-card, .grocery-card { min-height: 345px; }
  .nutrition-score { min-height: 165px; padding: 20px 18px; }
  .nutrition-score h2 { font-size: 27px; }
  .nutrition-ring { width: 96px; height: 96px; }
  .macro-summary-row { padding-right: 18px; padding-left: 18px; }
  .food-log-macros { grid-template-columns: 1fr; }
  .food-log-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .progression-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workout-detail-summary { grid-template-columns: repeat(2, 1fr); }
  .workout-detail-body { padding-right: 18px; padding-left: 18px; }
  .workout-safety-note { padding-right: 18px; padding-left: 18px; }
  .detail-footer { padding-right: 18px; padding-left: 18px; }
  .workout-detail-side { grid-template-columns: 1fr; }
  .exercise-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .progression-form label:first-child, .progression-form .dark-button { grid-column: 1 / -1; }
  .progress-log-card { padding-right: 18px; padding-left: 18px; }
  .progress-log-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progress-log-form .primary-button { grid-column: 1 / -1; }
  .measurement-log-card { padding-right: 18px; padding-left: 18px; }
  .measurement-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .measurement-form .outline-button { grid-column: 1 / -1; }
  .composition-card, .adaptive-card { padding-right: 18px; padding-left: 18px; }
  .composition-stats { grid-template-columns: repeat(2, 1fr); }
  .privacy-card-heading { display: block; padding: 20px 18px 17px; }
  .privacy-updated { display: block; margin-top: 10px; }
  .privacy-summary, .privacy-sections { grid-template-columns: 1fr; }
  .privacy-summary { gap: 12px; padding: 17px 18px; }
  .privacy-sections section, .privacy-sections section:nth-child(2n) { min-height: 0; padding: 18px; border-right: 0; }
  .privacy-contact { display: block; padding: 18px; }
  .privacy-contact-links { justify-content: flex-start; margin-top: 14px; }
  .privacy-note { padding: 16px 18px; }
  .terms-sections { grid-template-columns: 1fr; }
  .terms-sections section, .terms-sections section:nth-child(2n), .terms-sections section:nth-last-child(-n + 2) { min-height: 0; border-right: 0; border-bottom: 1px solid #e0ebdc; }
  .terms-sections section:last-child { border-bottom: 0; }
  .grocery-card { padding: 20px; }
  .grocery-progress { right: 20px; left: 20px; }
  .grocery-card .grocery-button { bottom: 20px; left: 20px; }
  .large-chart { margin-right: 18px; margin-left: 18px; }
  .large-chart-labels { padding-right: 18px; padding-left: 18px; }
  .mobile-nav { height: 65px; position: fixed; z-index: 30; inset: auto 0 0; display: grid; grid-template-columns: repeat(4, 1fr); padding: 7px 10px 6px; border-top: 1px solid var(--line); background: rgba(251, 253, 249, .94); backdrop-filter: blur(12px); }
  .chat-launcher { right: 15px; bottom: 80px; }
  .mobile-nav button { display: grid; justify-items: center; align-content: center; gap: 4px; color: #98a89d; background: transparent; font-size: 9px; font-weight: 600; }
  .mobile-nav button.is-active { color: #6e9545; }
  .mobile-nav button.is-active .icon { color: #6e9545; }
  .mobile-nav .icon { width: 18px; height: 18px; }
}

@media (max-width: 480px) {
  .form-grid { grid-template-columns: 1fr; }
  .goal-choice-grid { grid-template-columns: repeat(2, 1fr); }
  .progression-form { grid-template-columns: 1fr; }
  .progression-form label:first-child, .progression-form .dark-button { grid-column: auto; }
  .progression-result { grid-column: auto; margin-top: 4px; }
  .progress-log-form { grid-template-columns: 1fr; }
  .progress-log-form .primary-button { grid-column: auto; }
  .measurement-form { grid-template-columns: 1fr; }
  .measurement-form .outline-button { grid-column: auto; }
  .composition-stats { grid-template-columns: repeat(2, 1fr); }
  .welcome-actions { flex-wrap: wrap; gap: 10px; }
  .welcome-actions .primary-button,
  .welcome-actions .secondary-button { width: 100%; }
  .workout-detail-summary { grid-template-columns: 1fr; }
  .exercise-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .food-log-macros { grid-template-columns: 1fr; }
  .profile-page-intro { flex-direction: column; align-items: flex-start; gap: 16px; }
  .profile-account-summary { width: 100%; }
  .ai-drawer { top: 0; right: 0; width: 100vw; max-height: 100svh; border-radius: 0; }
  .macro-row { grid-template-columns: 1fr; }
  .macro-breakdown { grid-column: auto; }
  .week-picker { gap: 2px; padding: 3px; }
  .day-tab { min-width: 40px; min-height: 60px; }
  .day-tab strong { font-size: 15px; }
}

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