@charset "UTF-8";

:root {
  --ink:#263238; --muted:#64756f; --petrol:#006d77; --petrol-dark:#005761;
  --mint:#4db6ac; --mint-light:#e9f5f1; --line:#e5ebe7; --paper:#fff;
  --canvas:#f5f7f5; --peach:#fff1e7; --danger:#ae4e48; --radius:16px;
  --shadow:0 8px 28px rgba(29,66,63,.045);
  font-family:Inter,"Segoe UI",Arial,sans-serif; color:var(--ink); background:var(--canvas);
  font-synthesis:none; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--canvas); font-size:14px; line-height:1.5; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; color:inherit; border:0; background:none; padding:0; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button { transition:background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease; }
button:disabled { opacity:.45; cursor:not-allowed; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #84c8c1; outline-offset:3px; }
input,textarea,select { color:var(--ink); }
input::placeholder,textarea::placeholder { color:#94a09e; }
textarea { resize:vertical; }
button svg { pointer-events:none; flex-shrink:0; }
svg.icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
img { display:block; max-width:100%; }
a { color:var(--petrol); text-decoration:none; }
h1,h2,h3,h4,p { margin:0; }
h1,h2,h3,h4 { font-weight:650; letter-spacing:-.025em; }
.sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.prototype-bar { position:sticky; top:0; z-index:60; min-height:48px; padding:7px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; background:#193d3d; color:#e7f3ef; font-size:12px; }
.prototype-label { display:flex; align-items:center; gap:9px; white-space:nowrap; letter-spacing:.01em; }
.prototype-label:before { content:""; width:6px; height:6px; border-radius:50%; background:#83d3bc; box-shadow:0 0 0 4px #83d3bc16; }
.prototype-label strong { font-weight:600; }
.view-switch { display:flex; align-items:center; gap:3px; padding:3px; background:#ffffff0d; border:1px solid #ffffff17; border-radius:9px; }
.view-switch button { display:flex; align-items:center; justify-content:center; gap:7px; border:0; background:none; color:#bfd4cf; border-radius:6px; padding:5px 15px; font-size:12px; font-weight:550; white-space:nowrap; }
.view-switch button.active { background:#f2f8f5; color:#174c4c; box-shadow:0 2px 5px #00000014; }
.view-switch button:not(.active):hover { background:#ffffff10; color:white; }
.view-switch .icon { width:15px; height:15px; }
.reset-link { border:0; background:none; color:#c6d8d3; font-size:11px; padding:6px 0; text-decoration:underline; text-decoration-color:#ffffff40; text-underline-offset:3px; }
.reset-link:hover { color:white; }
.workspace { display:flex; min-height:calc(100dvh - 48px); }
.sidebar { position:sticky; top:48px; flex:0 0 220px; width:220px; height:calc(100dvh - 48px); display:flex; flex-direction:column; padding:30px 18px 20px; border-right:1px solid var(--line); background:#fff; }
.brand { display:flex; align-items:center; gap:10px; color:var(--petrol); font-size:24px; font-weight:750; letter-spacing:-1.1px; padding:0 10px; margin-bottom:44px; }
.brand > svg,.brand > .brand-mark,.brand > .logo-mark { width:34px; height:34px; padding:7px; border-radius:11px; background:var(--petrol); color:#d2f5dc; }
.brand small { display:block; color:var(--muted); font-size:10px; font-weight:500; letter-spacing:.08em; }
.nav-label { font-size:9px; font-weight:650; letter-spacing:1.5px; color:#98a4a1; padding:0 13px; margin:25px 0 10px; text-transform:uppercase; }
.nav-item { width:100%; display:flex; align-items:center; gap:12px; padding:12px 13px; margin:4px 0; border:0; background:none; border-radius:10px; text-align:left; font-size:12px; font-weight:500; color:#788783; white-space:nowrap; }
.nav-item .icon { width:18px; height:18px; }
.nav-item:hover { background:#f5f8f6; color:var(--petrol); }
.nav-item.active { color:var(--petrol); background:#e9f3ef; font-weight:650; }
.nav-item.active:after { content:""; width:5px; height:5px; background:var(--petrol); border-radius:50%; margin-left:auto; }
.sidebar-bottom { margin-top:auto; padding-top:26px; color:var(--muted); }
.sidebar-bottom > p,.sidebar-bottom > small { display:block; padding:10px 13px 0; font-size:10px; line-height:1.7; }
.workspace-body { flex:1; min-width:0; }
.topbar { height:72px; padding:0 34px; background:#ffffffbf; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:20px; color:var(--muted); font-size:12px; }
.topbar .breadcrumb { display:flex; align-items:center; gap:10px; }
.topbar .breadcrumb strong { color:#465a56; font-weight:500; }
.topbar .breadcrumb .icon { width:12px; height:12px; color:#aab3af; }
.user-chip { display:flex; align-items:center; gap:10px; color:var(--ink); }
.user-chip strong { display:block; font-size:11px; font-weight:600; }
.user-chip small { display:block; font-size:9px; color:var(--muted); margin-top:1px; }
.avatar { width:34px; height:34px; border-radius:50%; background:#e9ede4; color:#637354; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; font-size:11px; font-weight:650; }
.page-main { width:100%; max-width:1320px; margin:auto; padding:30px 32px 26px; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:26px; }
.page-heading h1 { font-size:27px; line-height:1.25; margin-bottom:7px; letter-spacing:-.8px; }
.page-heading p { color:var(--muted); font-size:12px; }
.actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:39px; padding:9px 16px; border:1px solid transparent; border-radius:9px; font-size:12px; font-weight:600; line-height:1.3; text-decoration:none; }
.button .icon { width:16px; height:16px; }
.button.primary { background:var(--petrol); color:#fff; border-color:var(--petrol); box-shadow:0 3px 5px #006d7710; }
.button.primary:hover { background:var(--petrol-dark); border-color:var(--petrol-dark); box-shadow:0 4px 12px #006d7720; }
.button.secondary { background:#fff; color:#52665f; border-color:#dce5df; }
.button.secondary:hover { background:#f8fbf9; border-color:#a8c5b8; }
.button.ghost { background:transparent; color:var(--petrol); border-color:transparent; }
.button.ghost:hover { background:#eaf3ee; }
.button.small { min-height:31px; padding:6px 10px; font-size:11px; gap:5px; }
.button.danger { color:var(--danger); background:#fdf0ef; border-color:#f5ddda; }
.button.danger:hover { background:#fbe3e0; }
.button:active:not(:disabled),.icon-button:active:not(:disabled) { transform:translateY(1px); }
.steps { display:flex; align-items:center; gap:26px; border-bottom:1px solid var(--line); margin-bottom:24px; }
.steps button { display:flex; align-items:center; gap:10px; position:relative; padding:0 0 19px; border:0; background:none; font-size:12px; font-weight:550; color:#93a09a; text-align:left; }
.steps button > span:first-child { width:21px; height:21px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #dce5df; background:#fff; border-radius:50%; font-size:9px; }
.steps button.active { color:var(--petrol); }
.steps button.active:after { content:""; position:absolute; height:2px; left:0; right:0; bottom:-1px; border-radius:2px; background:var(--petrol); }
.steps button.active > span:first-child,.steps button.done > span:first-child { border-color:var(--petrol); background:var(--petrol); color:white; }
.steps button.done { color:#4b8574; }
.editor-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; align-items:start; }
.editor-main { min-width:0; }
.day-strip { display:flex; align-items:stretch; gap:7px; overflow-x:auto; padding:1px 1px 10px; scrollbar-width:thin; scrollbar-color:#cbdcd2 transparent; }
.day-button { flex:1 0 57px; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:10px 7px; border:1px solid var(--line); border-radius:10px; background:white; color:#89968d; font-size:10px; }
.day-button strong { font-size:13px; font-weight:600; color:#5d6d63; }
.day-button.active { background:var(--petrol); border-color:var(--petrol); color:#b9e2d9; box-shadow:0 4px 12px #006d7718; }
.day-button.active strong { color:white; }
.day-button:hover:not(.active) { border-color:#a7c6b9; background:#f9fcf9; }
.icon-button { width:31px; height:31px; padding:6px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); background:white; color:#698078; border-radius:8px; flex-shrink:0; }
.icon-button .icon { width:16px; height:16px; }
.icon-button:hover { border-color:#b3cec2; background:#f0f7f2; color:var(--petrol); }
.day-strip > .icon-button { align-self:center; }
.day-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:13px 0 16px; }
.day-toolbar h2 { font-size:17px; }
.day-toolbar p,.day-toolbar small { color:var(--muted); font-size:10px; }
.day-toolbar > div:last-child { display:flex; align-items:center; gap:6px; }
.nutrition-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:16px 6px; border:1px solid var(--line); background:#fff; border-radius:12px; margin-bottom:20px; }
.nutrition-item { padding:0 15px; border-right:1px solid var(--line); }
.nutrition-item:last-child { border-right:0; }
.nutrition-item span,.nutrition-item small { display:block; color:var(--muted); font-size:9px; line-height:1.4; }
.nutrition-item strong { display:inline-block; font-size:19px; font-weight:650; margin-top:4px; letter-spacing:-.5px; }
.nutrition-item strong small { display:inline; font-size:10px; font-weight:400; margin-left:2px; }
.nutrition-item:first-child strong { color:var(--petrol); }
.meals-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
.meal-card { min-width:0; border:1px solid var(--line); border-radius:14px; background:white; overflow:hidden; box-shadow:var(--shadow); }
.meal-card.selected { border-color:#70aca0; box-shadow:0 0 0 1px #70aca01a,0 5px 18px #006d7705; }
.meal-header { display:flex; align-items:center; gap:10px; padding:17px 16px 14px; border-bottom:1px solid #edf1ed; }
.meal-icon { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; flex-shrink:0; background:#eaf5ef; color:#4c9984; }
.meal-icon .icon { width:18px; height:18px; }
.tone-sun { color:#bc963d; background:#fbf3db; }.tone-mint { color:#438c78; background:#e6f3ed; }
.tone-peach { color:#c18865; background:#fcf0e8; }.tone-blue { color:#688aa2; background:#ebf2f7; }
.meal-title { flex:1; min-width:0; }
.meal-title h3 { font-size:12px; font-weight:650; letter-spacing:0; }
.meal-title p,.meal-title small { color:#9aa69e; font-size:9px; margin-top:3px; }
.time-tag { display:inline-block; color:#829389; background:#f4f6f3; border-radius:5px; padding:3px 6px; font-size:9px; white-space:nowrap; }
.meal-header > .icon-button { width:24px; height:26px; padding:3px; border:0; color:#a7b0aa; }
.food-row { display:flex; align-items:center; gap:7px; min-height:67px; padding:12px 15px; border-bottom:1px solid #f0f3ef; }
.food-row:last-child { border-bottom:0; }
.food-copy { flex:1; min-width:0; }
.food-name { display:block; font-size:12px; font-weight:550; color:#46594e; line-height:1.4; text-align:left; }
.food-name:hover { color:var(--petrol); }
.food-meta { display:block; margin-top:4px; color:#859582; font-size:10px; }
.quantity-control { display:flex; align-items:center; justify-content:center; flex-shrink:0; gap:2px; border:1px solid #e7ece5; background:#fff; border-radius:6px; padding:2px; font-size:10px; color:#556b5c; }
.quantity-control button { border:0; padding:0; width:21px; height:23px; border-radius:4px; background:transparent; color:#849a8b; font-size:13px; }
.quantity-control button:hover { background:#edf4ed; color:var(--petrol); }
.quantity-control span { min-width:19px; text-align:center; }
.quantity-control input { width:28px; border:0; text-align:center; background:transparent; font-size:10px; padding:0; }
.food-remove { display:flex; align-items:center; justify-content:center; width:19px; height:25px; padding:0; border:0; color:#afbab0; background:transparent; border-radius:4px; }
.food-remove .icon { width:12px; height:12px; }
.food-remove:hover { color:var(--danger); background:#fff2ef; }
.meal-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 13px; background:#fbfcfa; border-top:1px solid #edf1e9; color:#8b9b8e; font-size:9px; }
.meal-footer .button { padding-left:3px; }
.meal-footer strong { color:#627b67; font-weight:600; }
.add-meal { min-height:64px; width:100%; display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px; padding:18px; border:1px dashed #c5d5c7; border-radius:14px; background:#f7faf5; color:#819881; font-size:12px; }
.add-meal:hover { border-color:var(--petrol); background:#edf5ee; color:var(--petrol); }
.day-note { margin-top:20px; }
.day-note label { display:flex; align-items:center; gap:7px; margin-bottom:8px; font-size:11px; font-weight:550; color:#6c806e; }
.day-note textarea { width:100%; min-height:71px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:11px; line-height:1.6; }
.library-panel { position:sticky; top:72px; padding:18px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }
.panel-heading { display:block; margin-bottom:18px; }
.panel-heading h2,.panel-heading h3 { font-size:14px; }
.panel-heading small { color:#92a295; font-size:10px; }
.search-box { display:flex; align-items:center; gap:7px; border:1px solid #e4ebe4; border-radius:8px; background:#fafcf9; padding:9px 11px; color:#98a79a; }
.search-box .icon { width:15px; height:15px; }
.search-box input { width:100%; min-width:0; border:0; padding:0; outline:0; background:transparent; font-size:11px; }
.search-box:focus-within { border-color:#7bb4a5; box-shadow:0 0 0 3px #c8e7da65; }
.category-tabs { display:flex; flex-wrap:wrap; gap:5px; margin:11px 0 16px; }
.category-tabs button { padding:5px 9px; background:transparent; border:1px solid transparent; border-radius:6px; font-size:10px; color:#85957f; }
.category-tabs button.active { color:var(--petrol); background:#eaf3ec; font-weight:600; }
.category-tabs button:hover { background:#f0f5ee; }
.library-list { display:flex; flex-direction:column; gap:14px; }
.library-food { display:flex; align-items:center; gap:10px; }
.library-food img { width:48px; height:48px; border-radius:9px; object-fit:cover; background:#f1f5ed; flex-shrink:0; }
.library-food img[src*="toast"] { object-position:50% 75%; }
.library-food-info { min-width:0; flex:1; }
.library-food-info strong,.library-food-info button { display:block; font-size:12px; font-weight:550; line-height:1.4; color:#4c614f; text-align:left; }
.library-food-info button:hover { color:var(--petrol); }
.library-food-info span,.library-food-info small { display:block; margin-top:4px; font-size:10px; color:#8b9b84; }
.library-add { width:25px; height:25px; display:flex; align-items:center; justify-content:center; border:1px solid #e0e9de; border-radius:7px; background:#fff; color:#7c9980; flex-shrink:0; }
.library-add .icon { width:13px; height:13px; }
.library-add:hover { background:var(--petrol); color:white; border-color:var(--petrol); }
.target-select { width:100%; margin:15px 0 0; padding:9px 10px; border:1px solid var(--line); border-radius:7px; background:#f9fbf7; font-size:10px; }
.assignment-summary { margin-top:18px; padding:16px; border:1px solid #e1e9df; border-radius:12px; background:#f0f5ed; }
.assignment-summary h3 { font-size:11px; margin-bottom:10px; }
.assignment-summary p,.assignment-summary small { display:block; font-size:10px; color:#8b9c86; line-height:1.65; }
.person-row { display:flex; align-items:center; gap:9px; }
.person-row strong { font-size:11px; }
.person-row .avatar { width:30px; height:30px; background:#e0e9d9; color:#728464; }
.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:5px; background:#80ad82; }
.page-footnote { display:flex; align-items:center; gap:6px; margin-top:22px; color:#9ca99c; font-size:9px; line-height:1.7; }
.page-footnote .icon { width:12px; height:12px; }

.mobile-stage { min-height:calc(100dvh - 48px); display:grid; grid-template-columns:minmax(240px,350px) 390px; justify-content:center; align-items:center; gap:82px; padding:44px 32px; background:radial-gradient(ellipse at 77% 20%,#e5eee1 0,transparent 55%),#f5f7f2; }
.mobile-context { max-width:350px; }
.mobile-context > .brand { padding:0; margin-bottom:46px; }
.mobile-context > small,.mobile-context .eyebrow { display:block; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:#779780; margin-bottom:16px; font-weight:600; }
.mobile-context h1,.mobile-context h2 { font-family:Georgia,"Times New Roman",serif; font-size:43px; font-weight:400; line-height:1.15; letter-spacing:-1.7px; color:#224c42; margin-bottom:21px; }
.mobile-context > p { font-size:13px; line-height:1.85; color:#809180; max-width:310px; }
.mobile-context ul,.mobile-context ol { padding:0; list-style:none; margin:26px 0; }
.mobile-context li { display:flex; align-items:center; gap:10px; padding:9px 0; font-size:12px; color:#617b65; }
.mobile-context .icon { color:#5b9e84; width:17px; height:17px; }
.mobile-context .button { margin-top:20px; }
.mobile-context .demo-hint { margin-top:28px; max-width:310px; }
.phone-shell { width:390px; position:relative; border:8px solid #263b34; border-radius:44px; background:#263b34; overflow:hidden; box-shadow:0 28px 65px #304d3326,0 5px 12px #304d3312,inset 0 0 0 1px #ffffff30; }
.phone-screen { height:800px; position:relative; overflow-x:hidden; overflow-y:auto; scrollbar-width:none; border-radius:35px; background:#fafbf8; }
.phone-screen::-webkit-scrollbar { display:none; }
.phone-status { display:flex; align-items:center; justify-content:space-between; padding:15px 24px 6px; height:42px; background:#fafbf8; font-size:12px; font-weight:650; color:#263b34; }
.phone-status > div { display:flex; gap:5px; align-items:center; }
.phone-status .icon { width:14px; height:14px; stroke-width:2; }
.mobile-content { padding:20px 22px 22px; }
.mobile-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; }
.mobile-header .avatar { width:42px; height:42px; font-size:12px; background:#e8eddf; }
.greeting { display:block; color:#92a08e; font-size:11px; margin-bottom:5px; }
.serif-heading { font-family:Georgia,"Times New Roman",serif; font-size:31px; font-weight:400; line-height:1.12; color:#285846; letter-spacing:-1px; }
.mobile-week { display:flex; gap:6px; justify-content:space-between; margin:0 0 23px; }
.week-day { min-width:35px; display:flex; flex:1; flex-direction:column; align-items:center; gap:6px; padding:10px 4px; border:0; border-radius:13px; background:transparent; color:#a2ab9c; font-size:9px; }
.week-day strong { color:#6d806b; font-size:12px; font-weight:600; }
.week-day.active { background:#e6eee0; color:#5d865c; }
.week-day.active strong { color:#346b47; }
.week-day:hover:not(.active) { background:#f0f3ea; }
.progress-card { display:flex; align-items:center; gap:17px; padding:18px; margin-bottom:26px; border-radius:17px; background:#eaf0e3; border:1px solid #e3ebdc; }
.progress-ring { width:63px; height:63px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#537b49; font-size:16px; font-weight:600; flex-shrink:0; background:conic-gradient(#89b77b var(--progress,25%),#d5e3cd 0); position:relative; }
.progress-ring:before { content:""; position:absolute; inset:6px; border-radius:50%; background:#eaf0e3; }
.progress-ring > * { position:relative; z-index:1; }
.progress-copy strong { display:block; font-size:13px; color:#536f46; font-weight:600; margin-bottom:5px; }
.progress-copy p,.progress-copy span { font-size:10px; line-height:1.6; color:#8d9d7e; }
.mobile-section-title { display:flex; align-items:center; justify-content:space-between; margin:0 0 13px; }
.mobile-section-title h2,.mobile-section-title h3 { font-size:15px; font-weight:600; color:#52694a; }
.mobile-section-title span,.mobile-section-title small { font-size:10px; color:#9daa91; }
.mobile-meal { width:100%; display:flex; align-items:center; text-align:left; gap:13px; padding:11px; margin-bottom:11px; border:1px solid #e8ede3; border-radius:15px; background:#fff; box-shadow:0 3px 10px #31483103; }
.mobile-meal:hover { border-color:#b8cdb0; background:#fefffc; }
.mobile-meal img { width:76px; height:76px; object-fit:cover; border-radius:11px; flex-shrink:0; }
.mobile-meal img[src*="toast"] { object-position:50% 75%; }
.mobile-meal-info { flex:1; min-width:0; }
.mobile-meal-info small { display:block; color:#9ca891; font-size:9px; margin-bottom:4px; }
.mobile-meal-info h3,.mobile-meal-info strong { display:block; font-size:12px; font-weight:600; color:#4f6447; margin-bottom:4px; letter-spacing:0; }
.mobile-meal-info p { font-size:10px; color:#9aa48e; line-height:1.5; }
.mobile-meal-status { display:inline-flex; align-items:center; gap:4px; font-size:9px; color:#92a38a; margin-top:6px; }
.mobile-meal-status .icon { width:12px; height:12px; }
.mobile-meal-status.complete,.mobile-meal-status.done { color:#5d9860; }
.mobile-meal > .icon { width:15px; height:15px; color:#acb8a1; flex-shrink:0; }
.water-card { background:#edf3f1; border:1px solid #e5eeea; border-radius:15px; padding:16px; margin-top:23px; }
.water-card .mobile-section-title { margin-bottom:15px; }
.water-card .mobile-section-title h3 { color:#5c8075; font-size:13px; }
.water-glasses { display:flex; align-items:center; gap:7px; justify-content:space-between; }
.water-glass { display:flex; align-items:center; justify-content:center; color:#cadbd4; }
.water-glass .icon { width:24px; height:26px; stroke-width:1.3; }
.water-glass.filled { color:#78ada3; }
.water-glass.filled .icon { fill:#aed5cd55; }
.water-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:15px; }
.water-footer strong { color:#5a8277; font-size:13px; font-weight:600; }
.water-footer small { color:#9db0a5; font-size:10px; }
.water-footer button { color:#668f82; background:#fff; border:1px solid #d8e6df; }
.bottom-nav { position:sticky; bottom:0; z-index:5; display:flex; justify-content:space-around; gap:12px; padding:12px 22px 20px; border-top:1px solid #edf0e8; background:#ffffffef; backdrop-filter:blur(16px); }
.bottom-nav button { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:2px 5px; border:0; background:none; color:#b0baaa; font-size:9px; }
.bottom-nav .icon { width:21px; height:21px; }
.bottom-nav button.active { color:#4b866e; }
.meal-hero { position:relative; height:205px; background:#e7ecdf; }
.meal-hero > img { width:100%; height:100%; object-fit:cover; }
.meal-hero > img[src*="toast"] { object-position:50% 75%; }
.back-button { position:absolute; left:18px; top:16px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid #ffffffa0; border-radius:50%; background:#ffffffde; color:#47623e; backdrop-filter:blur(8px); }
.back-button .icon { width:17px; height:17px; }
.meal-detail-heading { display:flex; justify-content:space-between; align-items:start; gap:12px; margin-bottom:18px; }
.meal-detail-heading h1 { font-family:Georgia,"Times New Roman",serif; font-size:27px; font-weight:400; color:#385f45; line-height:1.2; }
.meal-detail-heading p { margin-top:7px; font-size:10px; color:#9ba68f; }
.meal-detail-heading .time-tag { margin-top:5px; background:#edf2e6; color:#8b9b7d; }
.food-check-row { display:flex; align-items:center; gap:11px; padding:15px 0; border-bottom:1px solid #e9eee3; }
.food-check { width:23px; height:23px; display:flex; align-items:center; justify-content:center; padding:3px; border:1.5px solid #ccd9c2; border-radius:7px; background:white; color:transparent; flex-shrink:0; }
.food-check.checked { background:#78a77c; border-color:#78a77c; color:white; }
.food-check .icon { width:15px; height:15px; }
.check-food-info { flex:1; min-width:0; }
.check-food-info strong { display:block; color:#536a48; font-size:12px; font-weight:550; }
.check-food-info small,.check-food-info p { display:block; margin-top:4px; color:#9ba58e; font-size:10px; }
.recipe-link { border:0; background:none; color:#6c9e72; font-size:10px; padding:6px 0 6px 7px; white-space:nowrap; }
.recipe-link .icon { width:12px; height:12px; }
.detail-actions { display:flex; flex-wrap:wrap; gap:8px; margin:19px 0; }
.detail-actions .button.primary { flex:1; background:#438b70; border-color:#438b70; }
.detail-actions .button { font-size:11px; min-height:41px; }
.photo-upload { margin-top:18px; border:1px dashed #cfddc5; border-radius:13px; background:#f4f7ed; overflow:hidden; position:relative; }
.photo-upload > label,.photo-upload > button { width:100%; min-height:88px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; border:0; background:transparent; color:#8a9d7d; font-size:10px; cursor:pointer; padding:15px; }
.photo-upload small { font-size:9px; color:#a4af98; }
.meal-photo { width:100%; max-height:220px; object-fit:cover; }
.photo-remove { position:absolute; top:8px; right:8px; border:1px solid #ffffff90; border-radius:7px; background:#ffffffeb; color:#7f5b50; padding:5px 9px; font-size:9px; }
.meal-note { margin:18px 0 4px; }
.meal-note label { display:block; font-size:11px; color:#7d9271; margin-bottom:8px; }
.meal-note textarea { width:100%; min-height:76px; border:1px solid #e2e9d9; border-radius:11px; background:#fff; padding:12px; font-size:11px; line-height:1.7; }
.mobile-profile { padding:25px 0; text-align:center; }
.mobile-profile .avatar { width:64px; height:64px; margin:0 auto 18px; font-size:21px; }
.mobile-profile h2 { font-family:Georgia,"Times New Roman",serif; color:#456741; font-size:26px; font-weight:400; }
.mobile-profile p { margin:10px 0 24px; font-size:12px; color:#8d9c83; line-height:1.8; }

.login-screen { min-height:calc(100% - 42px); display:flex; flex-direction:column; align-items:center; padding:31px 27px 26px; background:linear-gradient(180deg,#f6f9ef,#fafbf8 56%); }
.login-wordmark { display:flex; align-items:center; gap:9px; color:var(--petrol); font-size:24px; font-weight:700; letter-spacing:-1px; margin-bottom:30px; }
.login-wordmark .icon { width:29px; height:29px; }
.login-art { display:flex; align-items:center; justify-content:center; position:relative; width:140px; height:140px; margin:9px auto 28px; border-radius:50%; background:#e6efd9; color:#78a475; box-shadow:0 0 0 18px #eef4e6,0 0 0 35px #f4f7ee; }
.login-art:before,.login-art:after { content:""; position:absolute; width:12px; height:12px; border-radius:50%; background:#b4ceb1; top:9px; right:-12px; }
.login-art:after { width:8px; height:8px; top:auto; right:auto; left:-15px; bottom:15px; background:#d4cbb1; }
.login-art .icon { width:65px; height:65px; stroke-width:1.1; }
.login-screen h1 { margin:17px 0 12px; color:#355d43; font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:30px; line-height:1.2; text-align:center; letter-spacing:-1px; }
.login-screen > p { max-width:260px; color:#8e9f84; font-size:11px; text-align:center; line-height:1.8; }
.login-form { width:100%; margin-top:28px; }
.login-form .button { width:100%; margin-top:7px; min-height:44px; }
.field { margin-bottom:17px; }
.field label { display:block; color:#657b68; font-size:11px; font-weight:550; margin-bottom:7px; }
.field input,.field select,.field textarea { width:100%; min-height:41px; padding:10px 12px; border:1px solid #dfe7dc; border-radius:9px; background:white; font-size:12px; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:#8cb59d; }
.field small { display:block; margin-top:6px; color:#9aa892; font-size:10px; line-height:1.6; }
.field .code-input { text-align:center; letter-spacing:12px; font-size:21px; padding-left:24px; min-height:50px; font-variant-numeric:tabular-nums; }
.demo-hint { padding:12px 14px; border:1px solid #e4ebdf; background:#f1f5eb; border-radius:9px; color:#8e9f84; font-size:10px; line-height:1.75; }
.demo-hint strong { color:#6c8766; font-weight:600; }
.login-form .demo-hint { margin-top:16px; }
.secure-note { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:auto; padding-top:24px; color:#a2ad99; font-size:9px; }
.secure-note .icon { width:12px; height:12px; }
.validation-error { margin:8px 0 13px; color:var(--danger); background:#fff1ed; padding:9px 11px; border:1px solid #f6dcd5; border-radius:8px; font-size:11px; }

.overlay-backdrop { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px; background:#142c2866; backdrop-filter:blur(5px); animation:fade-in .16s ease-out; }
.modal { width:560px; max-width:100%; max-height:90dvh; overflow-y:auto; border-radius:20px; background:#fff; box-shadow:0 28px 90px #183d3540; animation:rise-in .2s ease-out; }
.drawer { position:fixed; right:0; top:0; bottom:0; width:500px; max-width:100%; height:100dvh; overflow-y:auto; background:white; box-shadow:-15px 0 60px #153a3324; }
.modal-header { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:23px 25px 19px; border-bottom:1px solid var(--line); }
.modal-header h2 { font-size:20px; }
.modal-header p { font-size:11px; color:var(--muted); margin-top:5px; }
.modal-header .icon-button { background:#f5f8f3; border:0; color:#8e9f89; }
.modal-body { padding:23px 25px; }
.modal-body > p { color:#85957f; font-size:12px; line-height:1.8; margin-bottom:18px; }
.modal-footer { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:17px 25px 21px; border-top:1px solid var(--line); background:#fbfcf9; border-radius:0 0 20px 20px; }
.client-option { display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:12px; border:1px solid #e0e9dc; border-radius:10px; background:white; margin-bottom:9px; }
.client-option.selected { background:#eff6eb; border-color:#8fb898; box-shadow:0 0 0 1px #8fb89820; }
.client-option strong { display:block; font-size:12px; font-weight:550; }
.client-option small { display:block; font-size:10px; color:#9aa68d; margin-top:3px; }
.client-option > .icon:last-child { margin-left:auto; color:#79a17c; }
.assignment-preview { margin:20px 0 0; padding:17px; border-radius:11px; background:#f3f6ed; border:1px solid #e4ebdb; color:#6c8563; font-size:11px; line-height:1.8; }
.assignment-preview strong { color:#4b704b; }
.assignment-preview > div { display:flex; justify-content:space-between; gap:15px; padding:3px 0; }
.success-state { padding:28px 6px 16px; text-align:center; }
.success-icon { display:flex; align-items:center; justify-content:center; width:68px; height:68px; margin:0 auto 23px; border-radius:50%; background:#e7f2e1; color:#71a36b; }
.success-icon .icon { width:31px; height:31px; stroke-width:1.5; }
.success-state h2,.success-state h3 { color:#3d6542; font-size:23px; margin-bottom:10px; }
.success-state p { color:#94a186; font-size:12px; line-height:1.8; max-width:340px; margin:0 auto 20px; }
.recipe-cover { width:100%; height:230px; object-fit:cover; }
.recipe-cover[src*="toast"] { object-position:50% 75%; }
.recipe-tags { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 23px; }
.recipe-tags span { padding:5px 9px; background:#eff5e9; color:#7e9671; border-radius:6px; font-size:10px; }
.modal-body h3 { font-size:13px; color:#5c7651; margin-bottom:11px; }
.ingredients-list { margin:0 0 25px; padding-left:18px; color:#87987b; font-size:12px; line-height:2; }
.ingredients-list li::marker { color:#b0c59f; }
.recipe-steps { padding-left:22px; margin:0; color:#849776; font-size:12px; line-height:1.85; }
.recipe-steps li { padding-left:6px; margin-bottom:11px; }
.recipe-steps li::marker { color:#6f9963; font-weight:600; }
.toast { position:fixed; z-index:150; bottom:24px; left:50%; transform:translateX(-50%); max-width:calc(100% - 32px); display:flex; align-items:center; gap:20px; padding:13px 18px; border:1px solid #ffffff16; border-radius:11px; background:#294e3f; color:#edf6e5; box-shadow:0 9px 35px #1b392a30; font-size:12px; animation:fade-in .15s ease-out; }
.toast button { border:0; border-left:1px solid #ffffff26; padding:0 0 0 17px; background:none; color:#bfdbb1; font-size:11px; font-weight:600; white-space:nowrap; }
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px; min-height:128px; padding:23px; text-align:center; color:#a1ae97; font-size:11px; line-height:1.75; }
.empty-state .icon { width:27px; height:27px; color:#b3c4a8; }
.empty-state strong { color:#7d9570; font-weight:550; }

/* Component details matching the prototype's rendered markup. */
.modal-open { overflow:hidden; }
.eyebrow { display:block; color:#829b83; font-size:9px; font-weight:650; letter-spacing:1.5px; line-height:1.5; margin-bottom:8px; }
.prototype-label:before { display:none; }
.prototype-label .status-dot { width:6px; height:6px; margin-right:2px; background:#8cd5bb; box-shadow:0 0 0 4px #83d3bc14; }
.brand > .brand-mark { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.brand-mark .icon { width:23px; height:23px; }
.brand-dot { color:#7bbdaf; }
.sidebar .brand { margin-bottom:31px; }
.clinic-label { display:flex; align-items:center; gap:10px; padding:0 10px 23px; border-bottom:1px solid #edf1eb; }
.clinic-label .avatar { width:33px; height:33px; background:#edf0e4; }
.clinic-label .nav-text { min-width:0; }
.nav-text strong,.nav-text small { display:block; }
.clinic-label strong { color:#58715b; font-weight:600; font-size:11px; }
.clinic-label small { margin-top:3px; color:#9ba892; font-size:9px; white-space:nowrap; }
.sidebar-note { display:flex; align-items:flex-start; gap:10px; padding:16px 11px; background:#f3f7ee; color:#8aa47c; border-radius:11px; }
.sidebar-note .icon { width:19px; height:19px; flex-shrink:0; margin-top:3px; }
.sidebar-note p { font-size:11px; line-height:1.8; }
.sidebar-note strong { color:#719065; font-weight:500; }
.sidebar-version { display:block; font-size:9px; color:#abb5a3; padding:14px 12px 0; }
.title-edit { display:inline-flex; border:0; background:none; color:#98aa91; vertical-align:middle; width:28px; height:28px; margin-left:4px; }
.page-heading h1 { font-size:26px; }
.steps { gap:25px; }
.steps button { flex:1; }
.steps button > span:first-child { flex-shrink:0; width:24px; height:24px; }
.steps button > span:first-child .icon { width:13px; height:13px; }
.steps small { display:block; margin-top:4px; color:#9ba890; font-size:10px; line-height:1.5; font-weight:400; }
.steps > i { display:none; }
.day-button small { font-size:9px; color:#a4b19a; margin-top:2px; }
.day-button.active small { color:#a8d1ba; }
.day-toolbar h2 > span { font-weight:400; font-size:11px; color:#99a68e; letter-spacing:0; }
.nutrition-item > span { font-size:10px; }
.nutrition-item.energy { border-left:3px solid #7ba891; padding-left:12px; }
.meal-title h3 { font-size:13px; }
.meal-title > span { display:block; margin-top:3px; font-size:10px; color:#9ba68f; }
.meal-footer > button { display:inline-flex; align-items:center; gap:5px; color:#71996f; font-size:11px; padding:4px 0; }
.meal-footer > button:hover { color:var(--petrol); }
.meal-footer > button .icon { width:13px; height:13px; }
.meal-footer > span { font-size:12px; font-weight:600; color:#6d8765; }
.meal-footer > span small { font-size:10px; color:#9aa991; font-weight:400; }
.empty-meal { min-height:120px; display:flex; justify-content:center; align-items:center; padding:22px; font-size:11px; color:#a2b095; }
.day-note > small { display:block; margin-top:6px; color:#a3af98; font-size:10px; }
.day-note label .icon { width:14px; height:14px; }
.editor-aside { min-width:0; }
.panel-heading .eyebrow { margin-bottom:5px; font-size:8px; }
.panel-heading h2 { font-size:18px; line-height:1.3; color:#3f6146; }
.panel-heading p { margin-top:7px; font-size:11px; color:#9ba88f; }
.target-select { display:block; width:100%; padding:0; margin:0 0 17px; border:0; background:none; font-size:10px; color:#8ca280; }
.target-select select { display:block; width:100%; padding:9px 10px; margin-top:5px; border:1px solid #e0e8d9; border-radius:7px; background:#f8fbf4; color:#657f59; font-size:11px; }
.food-thumbnail { display:flex; align-items:center; justify-content:center; width:48px; height:48px; border:0; border-radius:9px; padding:0; overflow:hidden; flex-shrink:0; background:#f0f4e9; }
.food-thumbnail img { width:48px; height:48px; object-fit:cover; border-radius:0; }
.food-thumbnail > span { display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:#a8bc97; }
.food-thumbnail .icon { width:22px; height:22px; }
.library-note { display:flex; align-items:flex-start; gap:7px; margin:19px -2px -2px; padding-top:14px; border-top:1px solid #edf1e8; font-size:10px; line-height:1.65; color:#a2af94; }
.library-note .icon { width:13px; height:13px; flex-shrink:0; margin-top:2px; }
.assignment-summary { padding:19px; }
.assignment-summary h3 { margin:11px 0 7px; font-size:16px; color:#69875c; }
.assignment-summary p { font-size:11px; }
.assignment-summary .button { margin-top:8px; padding-left:0; color:#6b9567; }
.assignment-illustration { display:flex; align-items:center; justify-content:center; width:35px; height:35px; border-radius:50%; background:#e3edd9; color:#92ac7e; }
.assignment-illustration .icon { width:21px; height:21px; }
.assignment-summary .person-row { margin:12px 0; }
.assigned-check { margin-left:auto; color:#7ba773; }.assigned-check .icon { width:16px; height:16px; }
.mobile-context em { font-style:normal; color:#6a9878; }
.context-points { display:flex; flex-direction:column; gap:13px; margin:29px 0; }
.context-points > span { display:flex; align-items:center; gap:8px; font-size:12px; color:#839e78; }
.context-points .icon { width:15px; height:15px; }
.context-assignment { display:flex; align-items:center; gap:10px; padding:16px 0; border-top:1px solid #e1e9da; border-bottom:1px solid #e1e9da; }
.context-assignment strong { display:block; font-size:12px; color:#5c7a51; font-weight:550; }.context-assignment small { display:block; font-size:10px; margin-top:4px; color:#9bab90; }
.mobile-context .prototype-note { font-size:10px; line-height:1.8; margin-top:19px; color:#a4b097; }
.phone-status { position:relative; flex-shrink:0; }
.phone-island { position:absolute; top:11px; left:50%; transform:translateX(-50%); width:88px; height:21px; border-radius:20px; background:#263b34; }
.phone-status > span:last-child { letter-spacing:2px; font-size:11px; }
.login-wordmark { margin-bottom:18px; }
.login-wordmark .brand { padding:0; margin:0; font-size:26px; }
.login-wordmark .brand-mark { width:32px; height:32px; border-radius:10px; }
.login-wordmark .brand-mark .icon { width:21px; height:21px; }
.login-art > span,.login-art > i { display:none; }
.login-screen > .eyebrow { margin-top:4px; margin-bottom:0; font-size:8px; letter-spacing:1.8px; }
.login-screen h1 { margin-top:10px; font-size:31px; }
.login-screen > p { font-size:12px; }.login-screen > .demo-hint { margin-top:15px; width:100%; }
.login-screen .secure-note { font-size:10px; padding-top:19px; }
.demo-account { display:flex; align-items:center; gap:9px; width:100%; padding:11px 0; margin-top:15px; text-align:left; border-top:1px solid #e5ecdf; color:#7b9370; }
.demo-account .avatar { width:31px; height:31px; font-size:10px; }.demo-account > span:nth-child(2) { flex:1; }.demo-account strong { display:block; font-size:11px; font-weight:550; }.demo-account small { display:block; font-size:9px; margin-top:3px; color:#a1ae96; }.demo-account > .icon { width:14px; height:14px; }
.validation-error:empty { display:none; }
.mobile-date { font-size:10px; color:#9eaa91; }
.mobile-content > .mobile-header { margin-bottom:22px; }
.greeting { font-size:12px; color:#8a9c7e; margin-bottom:8px; }.greeting .icon { width:15px; height:15px; color:#c2ab6c; margin-left:2px; }
.mobile-content > .serif-heading { font-size:33px; line-height:1.14; margin-bottom:23px; }
.mobile-week { max-width:100%; overflow-x:auto; scrollbar-width:none; gap:4px; }
.week-day { min-width:37px; flex-shrink:0; }.week-day i { width:3px; height:3px; border-radius:50%; background:transparent; }.week-day.active i { background:#79a471; }
.progress-card { gap:12px; padding:16px 14px; }
.progress-ring { width:58px; height:58px; font-size:20px; }.progress-ring small { font-size:12px; font-weight:400; color:#95ab85; }
.progress-copy { flex:1; min-width:0; }.progress-copy strong { font-size:12px; }.progress-copy p { font-size:11px; }
.progress-card > .icon { width:23px; height:23px; align-self:flex-start; color:#b7caaa; stroke-width:1.2; margin-top:2px; }
.dietitian-note { display:flex; align-items:flex-start; gap:9px; padding:13px 14px; margin:-11px 0 23px; background:#f4f5ea; border:1px solid #eceedc; border-radius:12px; }
.dietitian-note > .icon { width:16px; height:16px; color:#a8b18b; flex-shrink:0; margin-top:2px; }.dietitian-note strong { display:block; color:#8a956f; font-size:10px; font-weight:550; }.dietitian-note p { color:#a1a88d; font-size:11px; line-height:1.65; margin-top:5px; }
.mobile-section-title h2 { font-size:15px; }
.mobile-meal { gap:12px; padding:10px; }.mobile-meal-image { display:flex; align-items:center; justify-content:center; width:76px; height:76px; flex-shrink:0; border-radius:11px; background:#f1f5e9; overflow:hidden; }.mobile-meal-image .meal-icon { width:100%; height:100%; }.mobile-meal-image .meal-icon .icon { width:30px; height:30px; }
.mobile-meal-info strong { font-size:14px; }.mobile-meal-info small { font-size:10px; }.mobile-meal-info > span:not(.mobile-meal-status) { display:block; font-size:10px; line-height:1.5; color:#9ca88e; }
.mobile-meal-status { font-size:9px; }.mobile-meal.complete .mobile-meal-status { color:#78a275; }.mobile-meal.partial .mobile-meal-status { color:#b4a060; }.mobile-meal.skipped .mobile-meal-status { color:#b2a28f; }
.meal-open { width:20px; height:20px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#b0be9e; }.meal-open .icon { width:14px; height:14px; }.mobile-meal.complete .meal-open { border-radius:50%; background:#eaf3df; color:#80a36b; }
.water-card .mobile-section-title h2 { display:flex; align-items:center; gap:5px; font-size:12px; color:#71958a; }.water-card .mobile-section-title h2 .icon { width:15px; height:15px; }.water-card .mobile-section-title > span { font-size:14px; font-weight:600; color:#6d998a; }.water-card .mobile-section-title small { font-size:10px; font-weight:400; color:#a2b6a5; }
.water-footer > span { font-size:9px; color:#9db09e; }.water-footer .button { font-size:11px; }.mobile-disclaimer { color:#aab59d; font-size:9px; text-align:center; line-height:1.7; padding:19px 0 0; }
.hero-placeholder { width:100%; height:100%; background:linear-gradient(145deg,#d7e6ce,#edf2e5); }.hero-label { position:absolute; left:20px; bottom:16px; color:#fff; font-size:8px; letter-spacing:1.7px; background:#2b4d3b88; border-radius:5px; padding:5px 8px; backdrop-filter:blur(8px); }
.meal-detail-heading { display:block; margin-bottom:24px; }.meal-detail-heading .eyebrow { margin-bottom:7px; font-size:9px; }.meal-detail-heading h1 { font-size:30px; margin-bottom:13px; }.meal-detail-heading .recipe-tags { margin-bottom:0; gap:6px; }.meal-detail-heading .recipe-tags span { font-size:9px; padding:4px 7px; }
.check-food-info strong { font-size:14px; line-height:1.4; }.check-food-info > span { display:block; font-size:11px; color:#9ca98b; margin-top:5px; }.check-food-info .recipe-link { display:flex; align-items:center; gap:5px; padding:7px 0 0; font-size:10px; }
.food-check-row { align-items:flex-start; padding:15px 0; }.food-check { margin-top:2px; width:24px; height:24px; }
.detail-actions { display:block; margin:21px 0 25px; }.detail-actions > .button { width:100%; min-height:43px; font-size:12px; }.detail-actions > div { display:flex; justify-content:space-between; gap:10px; margin-top:5px; }.detail-actions > div .button { font-size:10px; padding-left:0; padding-right:0; }
.meal-photo-section { margin-top:24px; }.meal-photo-section .mobile-section-title h2 { font-size:14px; }.meal-photo-section .mobile-section-title > span { font-size:9px; }
.photo-upload { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:118px; gap:7px; padding:19px; margin-top:0; cursor:pointer; }.photo-upload > .icon { width:24px; height:24px; color:#a8bd92; stroke-width:1.5; }.photo-upload > strong { font-size:12px; font-weight:550; color:#86a374; }.photo-upload > span { font-size:10px; color:#a7b497; }.photo-upload:hover { background:#edf4e4; border-color:#99bb89; }
.meal-photo { position:relative; width:100%; max-height:none; border-radius:13px; overflow:hidden; }.meal-photo > img { width:100%; max-height:240px; object-fit:cover; }.photo-remove { width:30px; height:30px; display:flex; align-items:center; justify-content:center; padding:6px; }.photo-remove .icon { width:15px; height:15px; }
.photo-help { display:block; font-size:9px; line-height:1.6; margin-top:7px; color:#adb69f; }.note-saved { display:block; color:#aab59a; font-size:9px; margin-top:5px; }.meal-note label { font-size:11px; }
.selection-circle { margin-left:auto; display:flex; align-items:center; justify-content:center; width:20px; height:20px; border:1px solid #d1ddc7; border-radius:50%; flex-shrink:0; }.selection-circle .icon { width:12px; height:12px; }.client-option.selected .selection-circle { border-color:#87ae7d; background:#87ae7d; color:white; }
.assignment-preview { display:flex; align-items:flex-start; gap:12px; }.assignment-preview > .icon { width:21px; height:21px; flex-shrink:0; margin-top:3px; color:#8aa57a; }.assignment-preview > div { display:block; padding:0; }.assignment-preview p { font-size:12px; margin:3px 0 6px; color:#829571; }.assignment-preview small { color:#a3af95; font-size:10px; }.replace-note { margin:14px 0 0!important; font-size:10px!important; color:#a5ae96!important; }
.success-tag { display:inline-block; color:#8ba87b; background:#f1f6e9; font-size:10px; padding:5px 10px; border-radius:6px; }
.recipe-tags .icon { width:12px; height:12px; margin-right:3px; }.recipe-cover { border-radius:12px; margin-bottom:17px; }.recipe-steps { list-style:none; padding:0; }.recipe-steps li { display:flex; gap:11px; padding:0; margin-bottom:13px; }.recipe-steps li > span { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:23px; height:23px; border-radius:50%; background:#eef4e6; color:#85a173; font-size:10px; margin-top:1px; }.recipe-steps p { margin:0; }
.field label > small { display:inline; font-size:10px; font-weight:400; }.profile-row { display:flex; align-items:center; justify-content:space-between; padding:13px 0; border-bottom:1px solid #eaf0e3; font-size:11px; color:#9ba88d; }.profile-row strong { color:#6d875b; font-weight:550; }.plan-day-list { margin-top:18px; }

@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes rise-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media (min-width:1600px) { .page-main { padding-top:38px; } .meals-grid { gap:20px; } .food-row { min-height:72px; } }
@media (max-width:1150px) {
  .sidebar { width:70px; flex-basis:70px; padding:28px 10px 16px; }
  .sidebar .brand { padding:0; justify-content:center; margin-bottom:36px; }
  .sidebar .brand > span:not(.brand-mark):not(.logo-mark),.sidebar .brand small,.sidebar .nav-text,.sidebar .nav-label,.sidebar-bottom > p,.sidebar-bottom > small { display:none; }
  .sidebar .nav-item { justify-content:center; padding:13px 8px; }.sidebar .nav-item.active:after { display:none; }
  .sidebar .clinic-label { justify-content:center; padding:0 0 22px; }.sidebar .sidebar-note { justify-content:center; padding:12px 0; }
  .editor-layout { grid-template-columns:minmax(0,1fr) 260px; gap:18px; }.library-panel { padding:15px; }
  .page-main { padding:27px 26px; }.topbar { padding:0 27px; }.page-heading h1 { font-size:25px; }
  .food-row { padding:11px 12px; gap:5px; }.meal-header { padding:15px 12px 13px; gap:7px; }.food-name { font-size:12px; }
}
@media (max-width:900px) {
  .meals-grid { grid-template-columns:1fr; }.meal-header { padding:16px; }.food-row { padding:13px 16px; }.food-name { font-size:12px; }.food-meta { font-size:10px; }
  .mobile-stage { gap:42px; grid-template-columns:minmax(180px,280px) 390px; padding:35px 26px; }.mobile-context h1,.mobile-context h2 { font-size:36px; }
  .page-heading { align-items:flex-start; gap:15px; }.page-heading .actions { justify-content:flex-end; }.page-heading p { max-width:260px; }
  .nutrition-item { padding:0 10px; }.nutrition-item strong { font-size:17px; }.steps { gap:20px; }
}
@media (max-width:750px) {
  .sidebar { display:none; }.editor-layout { grid-template-columns:1fr; }.library-panel { position:static; }.library-list { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .mobile-stage { grid-template-columns:390px; padding:28px 20px; }.mobile-context { display:none; }
  .page-heading h1 { font-size:24px; }.page-main { padding:25px 22px; }.topbar { height:61px; padding:0 22px; }
  .meals-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.food-row { padding:12px; }.food-name { font-size:11px; }
  .prototype-bar { padding:7px 16px; gap:10px; }.prototype-label { font-size:10px; }.view-switch button { padding:5px 10px; }
}
@media (max-width:600px) {
  .prototype-bar { min-height:48px; padding:6px 12px; gap:8px; }.prototype-label { gap:6px; font-size:9px; }.prototype-label:before { width:5px; height:5px; box-shadow:none; }
  .prototype-label span,.prototype-label small { display:none; }.view-switch { padding:2px; gap:1px; }.view-switch button { padding:6px 8px; font-size:10px; gap:5px; }.view-switch .icon { width:13px; height:13px; }.reset-link { font-size:9px; }
  .page-main { padding:22px 16px; }.topbar { height:58px; padding:0 16px; font-size:10px; }.user-chip > div:not(.avatar) { display:none; }.user-chip .avatar { width:29px; height:29px; font-size:10px; }
  .page-heading { flex-wrap:wrap; margin-bottom:23px; gap:16px; }.page-heading h1 { font-size:24px; }.page-heading p { font-size:11px; max-width:100%; }.page-heading .actions { width:100%; justify-content:flex-start; }.page-heading .actions .primary { margin-left:auto; }
  .steps { gap:13px; margin-bottom:19px; }.steps button { font-size:10px; gap:6px; padding-bottom:13px; }.steps button > span:first-child { width:19px; height:19px; }.steps small { font-size:8px; line-height:1.5; }.steps button { align-items:flex-start; }
  .day-strip { gap:5px; }.day-button { flex-basis:41px; padding:9px 5px; font-size:9px; }.day-button strong { font-size:12px; }.day-strip > .icon-button { width:27px; }
  .day-toolbar { align-items:flex-start; }.day-toolbar h2 { font-size:16px; }.day-toolbar .button { font-size:9px; padding:6px 7px; }
  .nutrition-strip { padding:14px 1px; }.nutrition-item { padding:0 10px; }.nutrition-item strong { font-size:18px; }.nutrition-item span { font-size:8px; }
  .meals-grid { grid-template-columns:1fr; gap:14px; }.meal-header { padding:16px; }.meal-title h3 { font-size:13px; }.food-row { padding:13px 16px; }.food-name { font-size:12px; }.food-meta { font-size:10px; }.quantity-control { font-size:11px; gap:4px; }.quantity-control button { width:24px; height:25px; }.food-remove { width:23px; margin-left:4px; }.meal-footer { padding:11px 16px; }
  .library-list { grid-template-columns:1fr; gap:16px; }.library-food-info strong { font-size:12px; }.library-food-info small,.library-food-info span { font-size:10px; }.library-add { width:31px; height:31px; }.library-panel { padding:18px; }
  .mobile-stage { display:block; padding:0; min-height:calc(100dvh - 48px); background:#fafbf8; }.phone-shell { width:100%; border:0; border-radius:0; box-shadow:none; background:#fafbf8; }.phone-screen { height:auto; min-height:calc(100dvh - 48px); border-radius:0; overflow:visible; }.phone-status { display:none; }
  .mobile-content { padding:27px 24px 24px; }.mobile-header { margin-bottom:23px; }.mobile-week { gap:8px; }.week-day { padding:12px 5px; }.mobile-meal img,.mobile-meal-image { width:80px; height:80px; }.mobile-meal { padding:12px; }.mobile-meal-info h3,.mobile-meal-info strong { font-size:14px; }
  .bottom-nav { position:sticky; bottom:0; padding:13px 24px max(18px,env(safe-area-inset-bottom)); }.meal-hero { height:220px; }.login-screen { min-height:calc(100dvh - 48px); padding:38px 31px 28px; }.login-form { max-width:360px; }.login-art { margin-top:20px; }
  .overlay-backdrop { padding:16px; }.modal { max-height:90dvh; border-radius:17px; }.modal-header { padding:20px; }.modal-header h2 { font-size:18px; }.modal-body { padding:20px; }.modal-footer { padding:15px 20px 19px; }.drawer { width:100%; max-height:100dvh; }.recipe-cover { height:200px; }
  .toast { bottom:16px; width:max-content; padding:12px 15px; gap:13px; font-size:11px; }.toast button { font-size:10px; padding-left:13px; }.page-footnote { align-items:flex-start; font-size:9px; }
}
.prototype-label .status-dot { display:none; }
.food-meta,.library-food-info small,.meal-title > span,.day-note > small,.panel-heading p,.steps small,.page-footnote,.mobile-date,.greeting,.progress-copy p,.mobile-section-title > span,.mobile-meal-info small,.mobile-meal-info > span,.login-screen > p,.demo-hint,.photo-help,.note-saved,.check-food-info > span,.water-footer > span { color:#65766f; }
.week-day { color:#65766f; }
.library-list { max-height:475px; overflow-y:auto; padding-right:3px; scrollbar-width:thin; scrollbar-color:#cbdcd2 transparent; }
@media (max-width:600px) {
  .phone-screen:has(.bottom-nav) { padding-bottom:80px; }
  .bottom-nav { position:fixed; bottom:0; left:0; right:0; z-index:40; }
  .toast { bottom:90px; }
  .mobile-content .food-check { width:30px; height:30px; }
  .recipe-link { min-height:36px; }
}
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } }
.message-shortcut { display:inline-flex; align-items:center; gap:6px; font-size:13px; } .message-shortcut[hidden], .message-unread[hidden], [data-message-shortcut][hidden] { display:none; } .message-unread { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#d7eee4; color:#164b46; font-size:11px; font-weight:700; }