:root {
  --blue-50:#f7faf9; --blue-100:#edf5f5; --blue-200:#dfedf0; --blue-300:#bed9e0;
  --blue-400:#86b7c9; --blue-500:#287b9b; --blue-600:#246e8b;
  --green:#527b65; --green-dark:#3b614d; --text-dark:#203d4b; --text-muted:#657b80;
  --danger:#b44644; --radius:22px; --shadow:0 8px 28px #203d4b08;
  --line:#e1e9e8; --serif:Georgia,'Times New Roman',serif;
}
* {box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#bed0d4 transparent;}
html,body {margin:0;padding:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--blue-50);color:var(--text-dark);-webkit-font-smoothing:antialiased;}
body {font-size:15px;line-height:1.5;}
button,input,select {font:inherit;}
button {cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
button {color:inherit;}
button:disabled {cursor:default;}
button,a,input,select {outline-offset:4px;}
:focus-visible {outline:3px solid var(--blue-500);}
button:active:not(:disabled) {transform:translateY(1px);}
button {transition:background .18s,box-shadow .18s,color .18s;}
h1,h2,h3,h4,p {margin:0;}
h1,h2 {letter-spacing:-.035em;}
button svg {pointer-events:none;}
.hidden {display:none!important;}
.icon-sprite {position:absolute;width:0;height:0;overflow:hidden;}
.icon {width:22px;height:22px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;}
.screen {width:100%;min-height:100vh;min-height:100dvh;}
.eyebrow {font-size:10px;font-weight:750;letter-spacing:.15em;line-height:1.6;color:var(--text-muted);}
.brand-dot {color:var(--blue-500);}
.btn {border:0;border-radius:14px;padding:14px 20px;min-height:48px;font-size:14px;font-weight:650;display:inline-flex;justify-content:center;align-items:center;gap:10px;}
.btn-primary {background:var(--blue-500);color:white;box-shadow:0 4px 10px #246e8b12;}
.btn-primary:hover:not(:disabled) {background:var(--blue-600);}
.btn-primary:disabled {background:#dfebed;color:#647b81;box-shadow:none;}
.btn-secondary {background:var(--blue-100);color:var(--blue-600);}
.btn-block {width:100%;}
.btn-small {padding:10px 14px;font-size:13px;}
.btn-small .icon {width:17px;height:17px;}
.icon-btn,.fav-btn,.remove-btn {border:0;background:transparent;width:44px;height:44px;flex-shrink:0;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-muted);}
.icon-btn:hover,.fav-btn:hover,.remove-btn:hover {background:var(--blue-100);color:var(--blue-600);}
.fav-btn .icon {width:21px;height:21px;}
.is-favorite {color:#bd5e61!important;}
.is-favorite .icon {fill:#bd5e611f;}
input,select {min-height:48px;width:100%;min-width:0;border:1px solid #d5e2e3;border-radius:12px;padding:12px 14px;background:#fff;color:var(--text-dark);font-size:16px;}
input::placeholder {color:#788d90;opacity:1;}
input:focus,select:focus {border-color:var(--blue-500);}
input:disabled {background:#f4f6f5;color:#7c898c;}
.field-label {text-align:left;font-size:12px;font-weight:650;}
.card {background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);}
.hint {font-size:13px;line-height:1.6;color:var(--text-muted);}
.hint-inline {font-size:12px;font-weight:400;color:var(--text-muted);}
.error-text {color:var(--danger);font-size:13px;background:#fcf1ef;padding:10px;border-radius:8px;}

/* The same little chef welcomes you at every screen size. */
.splash {display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:#e8f3f5;padding:24px;}
.splash-img {height:150px;width:150px;animation:pop-in .5s ease;}
.splash h1 {font-size:42px;margin-top:20px;letter-spacing:-.055em;}
.splash p {font-size:13px;color:var(--text-muted);margin-top:4px;}
@keyframes pop-in {from {opacity:0;transform:translateY(12px);}to {opacity:1;transform:translateY(0);}}
.login {padding:28px 22px;background:#eef5f3;}
.brand {display:flex;align-items:center;gap:10px;font-size:27px;font-weight:750;letter-spacing:-.06em;}
.brand img {width:45px;height:45px;}
.login-story {max-width:460px;margin:auto;}
.login-story-copy {margin-top:30px;}
.login-story h1 {font-family:var(--serif);font-weight:400;font-size:42px;line-height:1.08;margin:10px 0 16px;}
.story-description {font-size:14px;max-width:310px;color:var(--text-muted);line-height:1.65;}
.food-collage {height:150px;position:relative;margin:20px auto 4px;max-width:320px;}
.food-collage img {position:absolute;object-fit:cover;border:5px solid #fff;box-shadow:0 12px 30px #203d4b16;border-radius:24px;}
.food-one {width:106px;height:106px;left:0;top:14px;transform:rotate(-12deg);}
.food-two {width:132px;height:132px;left:94px;top:0;z-index:2;transform:rotate(4deg);}
.food-three {width:106px;height:106px;right:0;top:20px;transform:rotate(13deg);}
.food-note {display:none;}
.login-benefits {display:none;}
.login-panel {max-width:460px;margin:auto;}
#login-form-wrap {padding:24px;margin:0;}
#login-form-wrap h2 {font-family:var(--serif);font-size:29px;font-weight:400;margin:4px 0 8px;}
.tabs {display:flex;background:#f0f5f4;border-radius:12px;padding:4px;margin:22px 0;}
.tab-btn {flex:1;min-height:42px;border:0;background:none;color:var(--text-muted);border-radius:9px;font-size:13px;font-weight:650;}
.tab-btn.active {background:#fff;color:var(--text-dark);box-shadow:0 2px 5px #203d4b0a;}
#login-form {display:flex;flex-direction:column;gap:8px;}
#login-form .field-label:not(:first-child) {margin-top:8px;}
#login-submit {margin-top:12px;justify-content:space-between;}
.login-footnote {font-size:11px;color:var(--text-muted);margin-top:20px;text-align:center;}

/* A compact shell leaves the phone screen to the food. */
.app {height:100vh;height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
.app-header {flex-shrink:0;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:12px 20px;padding-top:calc(12px + env(safe-area-inset-top));background:#f7faf9f5;z-index:10;}
.header-left {display:flex;align-items:center;gap:10px;}
.header-logo {width:43px;height:43px;object-fit:contain;background:#e2eef0;border-radius:14px;padding:2px;}
.header-brand {display:flex;flex-direction:column;}
.header-brand>span:first-child {font-size:23px;font-weight:750;line-height:1.1;letter-spacing:-.055em;}
#header-title {margin-top:4px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-weight:550;}
.header-right {display:flex;gap:4px;}
.app-main {flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;padding:26px 20px 110px;padding-bottom:calc(110px + env(safe-area-inset-bottom));scroll-behavior:smooth;}
.view {max-width:1040px;margin:auto;}
.view-heading {display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:24px;}
.view-heading h1 {font-family:var(--serif);font-size:34px;font-weight:400;line-height:1.12;margin-top:8px;}
.view-description {font-size:13px;color:var(--text-muted);margin-top:10px;line-height:1.6;}
.date-chip {border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:10px;white-space:nowrap;margin-top:0;display:none;color:var(--text-muted);}
.plan-banner {position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;min-height:194px;padding:23px;background:#dfedf0;border:1px solid #d7e6e9;border-radius:24px;}
.banner-copy {z-index:1;max-width:70%;}
.tiny-pill {display:inline-block;font-size:8px;letter-spacing:.11em;font-weight:750;color:var(--blue-600);background:#ffffff99;border-radius:20px;padding:5px 9px;}
.plan-banner h2 {font-family:var(--serif);font-size:28px;line-height:1.12;font-weight:400;margin:12px 0 10px;}
.plan-banner p {font-size:11px;line-height:1.7;max-width:200px;color:#526f78;}
.plan-banner>img {position:absolute;right:0;bottom:8px;width:130px;height:170px;object-fit:contain;transform:rotate(5deg);}
.banner-spark {position:absolute;color:#829fa9;}
.spark-one {right:28px;top:20px;font-size:20px;}
.spark-two {right:145px;bottom:21px;font-size:16px;}
.kitchen-shortcuts {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 28px;}
.shortcut {display:flex;gap:10px;align-items:center;text-align:left;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 12px;min-height:80px;}
.shortcut>.icon {width:23px;height:23px;color:var(--blue-600);}
.shortcut:nth-child(2)>.icon {color:var(--green);}
.shortcut span {display:flex;flex-direction:column;min-width:0;}
.shortcut strong {font-size:11px;font-weight:650;}
.shortcut small {font-size:10px;color:var(--text-muted);line-height:1.5;margin-top:3px;}
.shortcut .shortcut-arrow {display:none;}
.shortcut:hover {background:var(--blue-100);}
.section-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 0 14px;}
.section-title {font-family:var(--serif);font-size:24px;font-weight:400;line-height:1.2;}
.count-pill {font-size:10px;color:var(--text-muted);background:var(--blue-100);padding:5px 10px;border-radius:20px;white-space:nowrap;font-weight:550;}
.section-caption {font-size:11px;color:var(--text-muted);}
.recipe-list {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.recipe-row {display:flex;align-items:center;min-width:0;gap:0;background:#fff;border:1px solid var(--line);border-radius:19px;padding:8px;box-shadow:0 3px 12px #203d4b03;}
.recipe-open {display:flex;align-items:center;gap:14px;border:0;background:transparent;text-align:left;padding:0;flex:1;min-width:0;}
.recipe-row img {width:87px;height:96px;object-fit:cover;flex-shrink:0;border-radius:13px;}
.recipe-row .info {flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.meal-number {font-size:8px;letter-spacing:.12em;color:var(--blue-600);font-weight:700;}
.recipe-row .title {font-size:14px;line-height:1.35;font-weight:650;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.recipe-row .cat {font-size:10px;line-height:1.5;color:var(--text-muted);}
.meta-dot {padding:0 3px;}
.recipe-row>.fav-btn {width:44px;margin-left:1px;align-self:center;}
.recipe-row:hover {border-color:#bdd7dc;}
.list-compact .recipe-row {padding:16px 10px 16px 18px;}
.previous-row {display:flex;gap:14px;overflow-x:auto;padding:2px 2px 12px;scroll-snap-type:x proximity;}
.previous-card {width:102px;flex:0 0 102px;border:0;padding:0;background:transparent;text-align:left;scroll-snap-align:start;}
.previous-card img {width:102px;height:95px;border-radius:16px;object-fit:cover;display:block;}
.previous-card .title {font-size:11px;color:var(--text-muted);display:block;margin-top:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.previous-empty {color:var(--text-muted);font-size:12px;padding:12px 0 8px;}
.next-plan {margin-top:20px;justify-content:space-between;padding:16px 18px;}
.next-plan .icon:last-child {margin-left:auto;}
.kitchen-footer {max-width:1040px;margin:32px auto 0;text-align:center;color:var(--text-muted);font-size:10px;}
.kitchen-footer span {display:block;font-weight:700;margin-top:8px;color:#6e8d94;}
.empty-state {text-align:center;background:#fff;border:1px dashed #bbd1d6;border-radius:22px;padding:30px 22px;margin-top:22px;}
.empty-illustration {width:68px;height:68px;background:#edf4ee;color:var(--green);border-radius:22px;margin:0 auto 18px;display:grid;place-items:center;}
.empty-illustration .icon {width:34px;height:34px;}
.empty-state h2 {font-family:var(--serif);font-size:28px;font-weight:400;}
.empty-state p {font-size:12px;color:var(--text-muted);line-height:1.8;margin:10px 0 20px;}
.empty-text {border:1px dashed #c9dadc;border-radius:20px;background:#fff;padding:40px 24px;text-align:center;font-size:14px;color:var(--text-muted);line-height:1.7;margin:20px 0;}
.bottom-nav {position:fixed;bottom:0;left:0;right:0;z-index:15;display:flex;justify-content:space-around;gap:4px;border-top:1px solid var(--line);background:#ffffffed;backdrop-filter:blur(18px);padding:8px 12px calc(8px + env(safe-area-inset-bottom));}
.nav-btn {flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:transparent;min-height:58px;padding:3px 0;font-size:10px;color:var(--text-muted);font-weight:500;}
.nav-icon {width:48px;height:33px;border-radius:12px;display:grid;place-items:center;}
.nav-icon .icon {width:22px;height:22px;}
.nav-btn.active {color:var(--blue-600);font-weight:650;}
.nav-btn.active .nav-icon {background:#e7f1f4;}

/* Grocery progress stays legible in a bright supermarket. */
.grocery-progress {background:#eaf1ea;border:1px solid #dce6dd;border-radius:20px;padding:20px;margin-bottom:20px;}
.grocery-progress>div {display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;margin-bottom:14px;color:#44614e;}
.grocery-progress span {display:flex;gap:8px;align-items:center;}
.grocery-progress .icon {width:20px;height:20px;}
.grocery-progress strong {font-size:10px;font-weight:550;}
progress {appearance:none;-webkit-appearance:none;border:0;width:100%;height:6px;display:block;border-radius:8px;overflow:hidden;background:#d8e3d9;accent-color:var(--green);}
progress::-webkit-progress-bar {background:#d8e3d9;}
progress::-webkit-progress-value {background:var(--green);border-radius:8px;}
progress::-moz-progress-bar {background:var(--green);}
.groceries-toolbar {display:flex;gap:8px;margin-bottom:26px;align-items:stretch;}
.grocery-input-wrap {position:relative;flex:1;min-width:0;}
.groceries-toolbar .btn {padding:10px;gap:3px;}
.groceries-toolbar .btn .icon {width:18px;}
.grocery-suggestions {position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;max-height:min(42vh,300px);overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 32px #203d4b18;}
.grocery-suggestions button {display:block;width:100%;text-align:left;padding:14px;border:0;border-bottom:1px solid var(--line);background:#fff;font-size:14px;}
.grocery-suggestions button:hover,.grocery-suggestions button[aria-selected=true] {background:var(--blue-100);}
.grocery-section {margin-bottom:26px;}
.grocery-section h3 {display:flex;align-items:center;justify-content:space-between;font-size:15px;margin-bottom:10px;}
.grocery-item {display:flex;align-items:center;gap:8px;padding:6px 4px 6px 3px;min-height:62px;margin-bottom:0;border:1px solid var(--line);border-top:0;background:#fff;}
.grocery-item:nth-child(2) {border-top:1px solid var(--line);border-radius:16px 16px 0 0;}
.grocery-item:last-child {border-radius:0 0 16px 16px;}
.grocery-item:nth-child(2):last-child {border-radius:16px;}
.grocery-item input[type=checkbox] {width:23px;height:23px;min-height:0;flex-shrink:0;accent-color:var(--green);margin:0;cursor:pointer;}
.grocery-check {width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;cursor:pointer;}
.grocery-item .name {flex:1;min-width:0;font-size:13px;overflow-wrap:anywhere;}
.grocery-item .qty {font-size:11px;color:var(--text-muted);max-width:75px;text-align:right;}
.grocery-item.checked {background:#f4f7f4;}
.grocery-item.checked .name {text-decoration:line-through;color:var(--text-muted);}
.remove-btn .icon {width:17px;height:17px;}
.remove-btn:hover {color:var(--danger);background:#fcf1ef;}

/* Recipe browsing uses generous photos and an explicit preview action. */
.recipe-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;list-style:none;margin:0;padding:0;}
.recipe-card {position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;min-width:0;}
.recipe-card img {width:100%;height:145px;object-fit:cover;display:block;}
.card-body {padding:13px;display:flex;flex-direction:column;gap:5px;text-align:left;}
.recipe-card .title {font-size:13px;font-weight:650;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.recipe-card .cat {font-size:9px;color:var(--text-muted);line-height:1.4;}
.favorite-recipe-open,.recipe-pick {width:100%;border:0;background:transparent;display:block;padding:0;text-align:left;}
.recipe-pick .card-body {min-height:99px;}
.recipe-card .select-check {position:absolute;top:10px;right:10px;width:32px;height:32px;border:1px solid #fff;border-radius:11px;background:#fffffff0;display:grid;place-items:center;color:var(--text-dark);box-shadow:0 2px 8px #203d4b10;}
.select-check .icon {width:18px;height:18px;}
.recipe-card.selected {border:2px solid var(--blue-500);background:#f3f9fa;}
.recipe-card.selected .select-check {background:var(--blue-500);color:#fff;border-color:var(--blue-500);}
.recipe-preview {width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;background:transparent;border:0;border-top:1px solid var(--line);padding:10px 13px;color:var(--blue-600);font-size:11px;font-weight:600;}
.recipe-preview .icon {width:16px;height:16px;}
.recipe-preview:hover {background:var(--blue-100);}
#favorites-list .fav-btn {position:absolute;top:10px;right:10px;background:#fff;width:36px;height:36px;border-radius:11px;box-shadow:0 2px 12px #203d4b10;}

/* Preferences are grouped like a tidy kitchen, with space for touch. */
.settings-grid {display:grid;gap:16px;}
.settings-card-heading {display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.settings-icon {display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:var(--blue-100);color:var(--blue-600);}
.settings-icon.sage {background:#edf3ec;color:var(--green);}
.settings-card-heading .eyebrow {font-size:8px;margin-bottom:4px;}
.settings-card-heading h3 {font-size:17px;font-weight:650;letter-spacing:-.025em;}
#view-settings label {display:block;font-size:12px;font-weight:600;margin:16px 0 6px;}
#view-settings label input,#view-settings label select {margin-top:6px;}
#save-settings-btn {width:100%;margin-top:18px;}
.share-code-row {background:var(--blue-100);border:1px dashed #bed7dd;padding:16px;border-radius:14px;text-align:center;font-size:27px;font-weight:650;letter-spacing:6px;margin:18px 0;}
.share-members {display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.share-members span {font-size:11px;background:#f2f5f3;color:var(--text-muted);padding:5px 10px;border-radius:20px;}
.inline-form {display:flex;gap:8px;}
.inline-form input {flex:1;min-width:0;}
.inline-form .btn {font-size:11px;max-width:110px;}
.beta-pill {font-size:9px;letter-spacing:0;background:#f5efdf;color:#796441;border-radius:6px;padding:4px 7px;display:inline-block;vertical-align:middle;margin-left:4px;}
#view-settings .card>h3 {font-size:17px;margin-bottom:12px;}
#view-settings .card>input {margin:16px 0 10px;}
#view-settings .card>button:disabled {color:var(--text-muted);background:#edf0ee;}

/* Bottom sheets respect the phone keyboard and home indicator. */
.modal-overlay {position:fixed;inset:0;background:#102f4266;backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;z-index:50;}
#recipe-detail-modal {z-index:60;}
.modal {width:100%;max-width:580px;max-height:94vh;max-height:94dvh;background:var(--blue-50);border-radius:26px 26px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;box-shadow:0 -10px 60px #203d4b1a;}
.modal.full {height:95vh;height:95dvh;display:flex;flex-direction:column;overflow:hidden;}
.modal-header {display:flex;align-items:center;gap:8px;flex-shrink:0;padding-bottom:15px;border-bottom:1px solid var(--line);margin-bottom:16px;}
.modal-header h3 {flex:1;min-width:0;font-size:16px;line-height:1.3;font-weight:650;letter-spacing:-.025em;}
.modal-header>.icon-btn {background:#eaf1f0;width:44px;height:44px;}
.modal-header .btn-small {min-height:44px;padding:10px;}
#selector-count {display:block;font-size:10px;font-weight:500;color:var(--text-muted);margin-top:5px;letter-spacing:0;}
.selector-intro,.review-intro {font-size:12px;color:var(--text-muted);line-height:1.6;margin:0 0 16px;flex-shrink:0;}
.selector-toolbar {display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:18px;flex-shrink:0;}
.selector-toolbar select {font-size:13px;background:#eaf1f0;border-color:transparent;min-height:42px;}
.selector-scroll {flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:2px 2px 0;}
.recipe-group {margin-bottom:24px;}
.group-title {display:flex;font-family:var(--serif);font-size:22px;line-height:1.3;font-weight:400;letter-spacing:-.025em;margin-bottom:12px;}
.recipe-hscroll {display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 10px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;}
.recipe-hscroll .recipe-card {flex:0 0 162px;width:162px;scroll-snap-align:start;}
.recipe-hscroll .recipe-card img {height:133px;}
#selector-sentinel {height:1px;}
#selector-result-count {font-size:10px;flex-shrink:0;}
.detail-back-btn {display:flex;align-items:center;gap:2px;min-height:44px;padding:0 5px;border:0;background:transparent;font-size:13px;font-weight:650;color:var(--blue-600);white-space:nowrap;}
.detail-back-btn .icon {width:20px;}
#detail-title {font-size:12px;font-weight:500;color:var(--text-muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.detail-body {flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:12px;}
.detail-body>img {width:100%;height:245px;object-fit:cover;border-radius:20px;display:block;}
.detail-name {font-family:var(--serif);font-size:31px;font-weight:400;line-height:1.15;margin-top:22px;}
.detail-meta {display:flex;align-items:center;gap:12px;margin:14px 0;font-size:12px;color:var(--text-muted);}
.pill {background:#e8f0e7;border-radius:8px;padding:5px 10px;font-size:10px;color:#526b4e;}
.detail-source {font-size:11px;color:var(--text-muted);margin:0 0 22px;}
.detail-source a {color:var(--blue-600);text-underline-offset:3px;}
.detail-body h4 {font-family:var(--serif);font-size:24px;font-weight:400;margin:24px 0 12px;}
#detail-ingredients {list-style:none;padding:0;margin:0;}
#detail-ingredients li {padding:10px 12px;border-bottom:1px solid var(--line);background:#fff;font-size:14px;line-height:1.6;}
#detail-ingredients li:first-child {border-radius:12px 12px 0 0;}
#detail-ingredients li:last-child {border-radius:0 0 12px 12px;border:0;}
#detail-instructions {list-style:none;counter-reset:steps;padding:0;margin:0;}
#detail-instructions li {counter-increment:steps;position:relative;padding:0 0 20px 42px;font-size:14px;line-height:1.8;}
#detail-instructions li::before {content:counter(steps);position:absolute;top:0;left:0;width:28px;height:28px;border-radius:10px;background:#dfedf0;color:var(--blue-600);display:grid;place-items:center;font-size:12px;font-weight:650;}
#review-list {overflow-y:auto;min-height:0;padding:2px;}
#review-list .recipe-row {gap:9px;padding:9px;}
#review-list .recipe-row img {width:54px;height:65px;border-radius:10px;}
#review-list .recipe-row .info {gap:4px;}
#review-list .recipe-row .title {font-size:12px;}
.servings-input {width:52px;min-width:52px;padding:9px 5px;text-align:center;}
#review-list .remove-btn {width:32px;}
.modal.sheet h3 {font-family:var(--serif);font-size:26px;font-weight:400;margin:0 0 16px;}
.menu-item {display:flex;align-items:center;gap:14px;min-height:54px;padding:13px 8px;width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;font-size:14px;text-align:left;}
.menu-item .icon {width:20px;color:var(--blue-600);}
.menu-item:hover {background:var(--blue-100);}
.menu-item.cancel {margin-top:8px;border:0;color:var(--text-muted);justify-content:center;}
.toast {position:fixed;bottom:calc(100px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:100;max-width:calc(100% - 36px);width:max-content;padding:13px 20px;background:var(--text-dark);color:#fff;border-radius:14px;font-size:13px;box-shadow:0 8px 30px #203d4b20;}
@media (max-width:350px) {
  .app-main {padding-left:14px;padding-right:14px;}
  .app-header {padding-left:14px;padding-right:14px;}
  .view-heading h1 {font-size:30px;}
  .plan-banner {padding:20px;}
  .plan-banner h2 {font-size:25px;}
  .plan-banner>img {width:108px;height:108px;right:-12px;}
  .banner-copy {max-width:72%;}
  .shortcut {gap:6px;padding:12px 9px;}
  .shortcut>.icon {width:19px;height:19px;}
  .shortcut strong {font-size:10px;}
  .recipe-row img {width:70px;height:90px;}
  .recipe-open {gap:10px;}
  .grocery-progress>div {flex-wrap:wrap;}
  .modal {padding-left:14px;padding-right:14px;}
  .modal-header {gap:5px;}
  .modal-header h3 {font-size:14px;}
  .modal-header .btn-small {gap:4px;font-size:11px;}
  .login {padding-left:16px;padding-right:16px;}
}
@media (max-width:599px) {
  .login {padding-top:20px;padding-bottom:20px;}
  .login-story-copy {margin-top:20px;}
  .login-story h1 {font-size:36px;margin:7px 0 10px;}
  .login-story .eyebrow {font-size:8px;}
  .story-description {font-size:12px;}
  .food-collage {height:106px;max-width:280px;margin:15px auto 16px;}
  .food-one,.food-three {width:90px;height:90px;top:9px;}
  .food-two {width:106px;height:106px;left:86px;}
  #login-form-wrap {padding:20px;}
  #login-form-wrap>.eyebrow {display:none;}
  #login-form-wrap h2 {font-size:26px;margin-top:0;}
  .tabs {margin:16px 0;}
  .login-footnote {margin-top:14px;font-size:10px;}
}
@media (min-width:600px) {
  .view-heading h1 {font-size:42px;}
  .mobile-break {display:none;}
  .date-chip {display:block;}
  .plan-banner {padding:32px;min-height:218px;}
  .plan-banner h2 {font-size:36px;}
  .plan-banner p {font-size:13px;max-width:none;}
  .plan-banner>img {width:180px;height:180px;right:35px;bottom:15px;}
  .spark-one {right:35px;}
  .spark-two {right:240px;}
  .kitchen-shortcuts {gap:16px;}
  .shortcut {padding:18px 20px;gap:16px;}
  .shortcut strong {font-size:14px;}
  .shortcut small {font-size:12px;}
  .shortcut .shortcut-arrow {display:block;margin-left:auto;width:18px;color:var(--text-muted);}
  .recipe-row img {width:110px;height:110px;}
  .recipe-row .title {font-size:16px;}
  .recipe-row .cat {font-size:12px;}
  .meal-number {font-size:9px;}
  .recipe-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
  .settings-grid {grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;}
  .settings-grid>.card:nth-child(2) {grid-column:2;grid-row:1 / span 2;}
  .selector-toolbar {grid-template-columns:minmax(0,1fr) 210px;}
  .selector-toolbar select {font-size:14px;}
  .modal-overlay {align-items:center;}
  .modal {border-radius:26px;max-width:860px;max-height:88dvh;padding:26px;}
  .modal.full {height:88dvh;}
  .modal.sheet {max-width:440px;}
  .modal-header h3 {font-size:20px;}
  #selector-count {display:inline;margin-left:10px;}
  .recipe-hscroll .recipe-card {flex-basis:190px;width:190px;}
  .recipe-hscroll .recipe-card img {height:150px;}
  .detail-body>img {height:330px;}
  #recipe-detail-modal .modal {max-width:660px;}
}
@media (min-width:1000px) {
  .app-header {height:91px;padding:20px 34px;padding-top:20px;}
  .header-logo {width:48px;height:48px;}
  .header-brand>span:first-child {font-size:26px;}
  .header-right {gap:10px;}
  .app-main {margin-left:220px;padding:38px 42px 50px;}
  .bottom-nav {top:91px;right:auto;width:220px;bottom:0;flex-direction:column;justify-content:flex-start;gap:8px;padding:28px 18px;border-top:0;border-right:1px solid var(--line);background:#f2f7f5;backdrop-filter:none;}
  .bottom-nav::after {content:'A little planning.\A A lot more enjoying.';white-space:pre;position:absolute;bottom:30px;left:30px;font-family:var(--serif);font-size:18px;line-height:1.5;color:#789094;}
  .nav-btn {flex:none;flex-direction:row;justify-content:flex-start;gap:12px;font-size:13px;min-height:54px;padding:8px 14px;border-radius:14px;}
  .nav-icon {width:26px;height:30px;}
  .nav-btn.active {background:#dfecef;}
  .nav-btn.active .nav-icon {background:transparent;}
  .nav-btn:hover {background:#e5efec;}
  .view-heading {margin-bottom:28px;align-items:center;}
  .view-heading h1 {font-size:44px;}
  .view-description {font-size:14px;}
  .eyebrow {font-size:10px;}
  .date-chip {font-size:12px;padding:9px 13px;}
  .plan-banner {min-height:220px;}
  #current-plan-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
  #current-plan-list .recipe-row img {width:95px;height:108px;}
  #current-plan-list .recipe-row .title {font-size:14px;}
  #current-plan-list .recipe-row .cat {font-size:10px;}
  #current-plan-list.list-compact {grid-template-columns:1fr;}
  .section-heading {margin-top:30px;}
  .section-title {font-size:27px;}
  .next-plan {max-width:400px;}
  .recipe-grid {grid-template-columns:repeat(4,minmax(0,1fr));}
  #view-groceries {max-width:800px;}
  #grocery-sections {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;align-items:start;}
  .grocery-progress {padding:24px;}
  .grocery-progress>div,.grocery-progress strong {font-size:13px;}
  .grocery-item .name {font-size:14px;}
  .login {display:grid;grid-template-columns:1.1fr .9fr;align-items:center;padding:48px 6vw;gap:70px;min-height:100dvh;}
  .login-story {max-width:650px;width:100%;}
  .brand {font-size:34px;}
  .brand img {width:57px;height:57px;}
  .login-story-copy {margin-top:55px;}
  .login-story h1 {font-size:clamp(55px,5.5vw,80px);margin:14px 0 24px;}
  .story-description {font-size:16px;max-width:360px;}
  .food-collage {height:245px;margin:35px 0 30px;max-width:460px;}
  .food-one {width:170px;height:170px;left:5px;top:20px;border-width:7px!important;border-radius:30px!important;}
  .food-two {width:208px;height:208px;left:135px;top:0;border-width:7px!important;border-radius:30px!important;}
  .food-three {width:165px;height:165px;right:0;top:32px;border-width:7px!important;border-radius:30px!important;}
  .food-note {display:block;position:absolute;bottom:0;left:20px;transform:rotate(-3deg);font-family:var(--serif);font-style:italic;font-size:20px;color:#5c797d;}
  .login-benefits {display:flex;gap:20px;flex-wrap:wrap;font-size:11px;color:var(--text-muted);}
  .login-benefits span {display:flex;gap:7px;align-items:center;}
  .login-benefits .icon {width:17px;height:17px;}
  .login-panel {width:100%;max-width:450px;margin:auto;}
  #login-form-wrap {padding:38px;background:#ffffffd9;box-shadow:0 20px 60px #203d4b08;}
  #login-form-wrap h2 {font-size:36px;}
  .login-footnote {margin-top:26px;}
  .toast {bottom:30px;}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}
@media print {
  html,body,.app {height:auto;overflow:visible;background:white;}
  .app-main {overflow:visible;margin:0;padding:20px;}
  .bottom-nav,.header-right,.kitchen-shortcuts,.next-plan,.kitchen-footer,.plan-banner,.modal-overlay,.fav-btn {display:none!important;}
  .recipe-row {break-inside:avoid;box-shadow:none;}
}