/* V1 is an optional visual layer. Removing design-v1 restores the original CSS. */
html.design-v1 {
  --bg-color: #f6f7f1;
  --card-bg: #ffffff;
  --text-main: #18362d;
  --text-muted: #657a70;
  --accent-red: #bb5946;
  --accent-green: #2b7457;
  --accent-yellow: #9e690f;
  --accent-blue: #286d84;
  --accent-purple: #805990;
  --border-color: #e1e9df;
  background: var(--bg-color);
}

.v1-menu-button, .v1-home-intro, .v1-list-more, .v1-subtitle, .v1-only, .app-menu-overlay { display: none; }
html.design-v1 .original-only { display: none; }
html.design-v1 .v1-only { display: inline; }

html.design-v1 body {
  max-width: 560px;
  min-height: 100dvh;
  padding: 0 22px calc(112px + env(safe-area-inset-bottom));
  background: var(--bg-color);
  background-image: radial-gradient(circle at 100% 0%, #e1efdd 0, transparent 340px);
  line-height: 1.45;
}

html.design-v1 header {
  min-height: 82px;
  padding: 18px 0 8px;
  gap: 12px;
}
html.design-v1 header .menu-btn, html.design-v1 header > div { display: none; }
html.design-v1 header .v1-menu-button {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid #d4e4d5;
  border-radius: 15px;
  background: #fff;
  color: var(--text-main);
  font-size: 19px;
  box-shadow: 0 4px 12px #214f3010;
}
html.design-v1 header h1 { flex: 1; font-size: 17px; font-weight: 800; letter-spacing: -.04em; }
html.design-v1 header h1::after { content: 'Make more of every meal'; display: block; color: var(--text-muted); font-size: 11px; font-weight: 500; letter-spacing: 0; }

html.design-v1 .v1-home-intro { display: block; margin: 20px 0 20px; }
html.design-v1 .v1-eyebrow { display: block; color: var(--accent-green); font-size: 10px; font-weight: 800; letter-spacing: .17em; }
html.design-v1 .v1-home-intro h2 { max-width: 330px; margin-top: 8px; font-size: clamp(32px, 8vw, 42px); font-weight: 800; letter-spacing: -.055em; line-height: 1.07; }
html.design-v1 .v1-home-intro p { margin-top: 9px; color: var(--text-muted); font-size: 14px; }

html.design-v1 .card { padding: 20px; border: 1px solid var(--border-color); border-radius: 23px; box-shadow: 0 8px 25px #3857460a; }
html.design-v1 .impact-banner { display: block; min-height: 124px; margin-bottom: 15px; background: #184d3a; border-color: #184d3a; color: #fff; box-shadow: 0 14px 28px #184d3a25; }
html.design-v1 .impact-title { display: block; margin-bottom: 16px; font-size: 18px; letter-spacing: -.02em; }
html.design-v1 .impact-title > .v1-only { display: flex; align-items: center; justify-content: space-between; }
html.design-v1 .impact-title .v1-only span { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #ffffff66; border-radius: 50%; font-size: 17px; font-weight: 400; }
html.design-v1 .impact-detail { color: #bdeccf; font-size: 13px; font-weight: 500; }
html.design-v1 .card-urgent { margin-bottom: 25px; border-color: var(--border-color); }
html.design-v1 .card-title { color: var(--text-main); font-size: 20px; font-weight: 800; letter-spacing: -.035em; }
html.design-v1 .card-urgent .card-title { color: var(--text-main); }
html.design-v1 .urgent-help { margin: -4px 0 15px !important; font-size: 12px !important; line-height: 1.45 !important; }
html.design-v1 .expiring-list { margin: 0 0 12px; padding: 0; border: 0; }
html.design-v1 .expiring-list li { margin: 0; padding: 12px 0; border-top: 1px solid var(--border-color); font-size: 13px; }
html.design-v1 .expiring-list li:nth-child(n+5) { display: none; }
html.design-v1 .card-urgent.show-all .expiring-list li:nth-child(n+5) { display: flex; }
html.design-v1 .expiring-list input { width: 18px; height: 18px; }
html.design-v1 .v1-list-more:not([hidden]) { display: block; width: 100%; min-height: 40px; margin: -1px 0 12px; border: 0; border-top: 1px solid var(--border-color); background: transparent; color: var(--accent-green); text-align: left; font-size: 13px; font-weight: 700; cursor: pointer; }
html.design-v1 .btn-ai { min-height: 52px; background: #e2efe4; border: 0; border-radius: 14px; color: #185d3d; font-size: 14px; }
html.design-v1 .btn-ai:active { background: #cee3d1; }
html.design-v1 .btn-ai:disabled { opacity: .48; cursor: not-allowed; }
html.design-v1 .section-label { margin: 18px 2px 11px; color: var(--text-muted); font-size: 11px; font-weight: 800; letter-spacing: .13em; }
html.design-v1 .quick-actions { gap: 12px; margin-bottom: 20px; }
html.design-v1 .action-btn { min-height: 130px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 17px; border-radius: 20px; background: #fff; box-shadow: 0 6px 20px #3857460a; }
html.design-v1 .action-btn .icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: #e5f0e4; font-size: 20px; }
html.design-v1 .action-btn:nth-child(2) .icon { background: #f9ead8; }
html.design-v1 .action-btn .title { color: var(--text-main); font-size: 15px; font-weight: 800; }
html.design-v1 .action-btn .subtitle { margin-top: 2px; color: var(--text-muted); font-size: 12px; }
html.design-v1 .v1-receipts { margin: 8px 0 25px; }
html:not(.design-v1) .v1-receipts summary { margin-bottom: 8px; color: var(--text-muted); font-size: 13px; font-weight: bold; letter-spacing: .5px; list-style: none; pointer-events: none; }
html:not(.design-v1) .v1-receipts summary::-webkit-details-marker { display: none; }
html.design-v1 .v1-receipts summary { display: flex; justify-content: space-between; padding: 15px 3px; border-top: 1px solid var(--border-color); color: var(--text-muted); font-size: 13px; font-weight: 700; cursor: pointer; list-style: none; }
html.design-v1 .v1-receipts summary::-webkit-details-marker { display: none; }
html.design-v1 .v1-receipts[open] summary .v1-only span { transform: rotate(180deg); }
html.design-v1 .v1-receipts .product-item { margin-top: 8px; }
html.design-v1 .receipt-delete-button { display: block; margin: 10px 0 0 auto; min-height: 36px; }

html.design-v1 nav { left: 50%; right: auto; bottom: max(10px, env(safe-area-inset-bottom)); width: min(calc(100% - 24px), 516px); max-width: none; padding: 7px; transform: translateX(-50%); border: 1px solid #d9e5d9; border-radius: 23px; background: #fff; box-shadow: 0 10px 32px #28483525; }
html.design-v1 .nav-item { min-width: 0; min-height: 58px; gap: 0; border-radius: 17px; color: var(--text-muted); font-size: 11px; font-weight: 700; }
html.design-v1 .nav-item span { font-size: 22px; line-height: 1.1; font-weight: 600; }
html.design-v1 .nav-item .nav-label { font-size: 11px; line-height: 1.3; font-weight: 700; }
html.design-v1 .nav-item.active { background: #e3f0e4; color: #185d3d; }
html.design-v1 .view-section:not(#view-home) { padding-top: 22px; }
html.design-v1 .view-section:not(#view-home) > .section-label:first-child { margin-top: 5px; color: var(--text-main); font-size: 22px; letter-spacing: -.03em; }
html.design-v1 .v1-subtitle { display: block; margin-top: 3px; color: var(--text-muted); font-size: 12px; font-weight: 500; letter-spacing: 0; }
html.design-v1 .tabs { margin: 19px 0; padding-bottom: 4px; }
html.design-v1 .tab { min-height: 42px; padding: 10px 16px; border-radius: 14px; background: #fff; color: var(--text-muted); font-size: 13px; }
html.design-v1 .tab.active { border-color: #1f6547; background: #1f6547; color: #fff; }
html.design-v1 .product-item { border-radius: 17px; background: #fff; box-shadow: 0 4px 18px #38574608; }
html.design-v1 .product-item.active-accordion { border-color: #77aa83; background: #fff; }
html.design-v1 .product-accordion-details, html.design-v1 .recipe-detail-panel, html.design-v1 .shopping-plan-card { background: #f7faf5; }
html.design-v1 .btn-main { background: #256b4b; color: #fff; border-radius: 13px; }
html.design-v1 .btn-main:disabled { background: #dfe7df; color: #738477; }
html.design-v1 .recipe-drop-zone { border: 1px solid var(--border-color); }
html.design-v1 .recipe-card-opt { border-radius: 18px; }
html.design-v1 .modal-overlay { background: #14271dcc; }
html.design-v1 .modal-content { border-radius: 26px 26px 0 0; background: #fff; }
html.design-v1 .modal-fullpage { background: var(--bg-color); }
html.design-v1 .modal-fullpage-content { background: var(--bg-color); }
html.design-v1 .modal-content button[onclick^="close"], html.design-v1 .modal-fullpage button[onclick^="close"] { color: var(--text-main) !important; }
html.design-v1 .account-form input, html.design-v1 .account-form textarea, html.design-v1 .account-form select, html.design-v1 .review-add-form, html.design-v1 .review-add-form input, html.design-v1 .review-add-form select, html.design-v1 .snap-edit-fields input, html.design-v1 .api-key-box { background: #f7faf5; color: var(--text-main); }
html.design-v1 .info-row { border-bottom-color: var(--border-color); }
html.design-v1 .recipe-nutrition-value { background: #eaf3e9; }

html.design-v1 .app-menu-overlay.active { display: flex; }
html.design-v1 .app-menu-content { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.app-menu-heading { display: flex; justify-content: space-between; align-items: flex-start; margin: 3px 0 20px; }
.app-menu-heading h2 { margin-top: 5px; font-size: 27px; letter-spacing: -.05em; }
.app-menu-close { width: 39px; height: 39px; border: 0; border-radius: 12px; background: #eff4ed; color: var(--text-main); font-size: 18px; cursor: pointer; }
.app-menu-action { display: flex; align-items: center; width: 100%; gap: 15px; min-height: 70px; padding: 12px 0; border: 0; border-top: 1px solid var(--border-color); background: transparent; color: var(--text-main); text-align: left; font-size: 15px; font-weight: 700; cursor: pointer; }
.app-menu-action > span:first-child { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; background: #e8f1e7; color: var(--accent-green); font-size: 19px; }
.app-menu-action small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 11px; font-weight: 500; }
.app-menu-action b { margin-left: auto; color: var(--text-muted); font-size: 24px; font-weight: 400; }
.design-choice { margin-top: 20px; }
.design-choice > span { color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.design-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.design-options button { min-height: 45px; border: 1px solid var(--border-color); border-radius: 12px; background: #fff; color: var(--text-main); font-size: 13px; font-weight: 700; cursor: pointer; }
.design-options button.selected { border-color: #26714f; background: #e4f1e6; color: #185d3d; }
.original-design-access { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; padding-top: 15px; border-top: 1px solid var(--border-color); color: var(--text-muted); font-size: 12px; }
.original-design-access button { min-height: 36px; padding: 6px 10px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-color); color: var(--text-main); cursor: pointer; }
html.design-v1 .original-design-access { display: none; }

@media (max-width: 360px) {
  html.design-v1 body { padding-left: 16px; padding-right: 16px; }
  html.design-v1 .card { padding: 17px; }
  html.design-v1 .action-btn { padding: 13px; }
}