/* ============ KhanaPro design system — warm, appetising, premium ============ */
:root {
  --bg: #FFF9F2;
  --card: #FFFFFF;
  --ink: #1F1A14;
  --ink2: #6E6258;
  --accent: #E8420A;       /* the one brand accent (matches --kp-accent) */
  --accent-soft: #FCEAE1;
  --green: #0F8A3D;
  --green-soft: #E4F3E9;
  --hair: rgba(31, 26, 20, .08);
  --gold: #F7B32B;
  --radius: 20px;
  --shadow: 0 1px 2px rgba(31, 26, 20, .05), 0 6px 18px rgba(31, 26, 20, .06);
  --shadow-lift: 0 12px 32px rgba(31, 26, 20, .14);
  --nav-h: 72px;
  --nav-clear: calc(72px + 34px + env(safe-area-inset-bottom, 0px));
  --font: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font); background: var(--bg); color: var(--ink);
  min-height: 100dvh; overscroll-behavior-y: none;
}
img { display: block; }
button { font-family: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
input, textarea { font-family: inherit; font-size: 16px; }
h1 { font-size: 26px; font-weight: 800; letter-spacing: -.4px; }
h2 { font-size: 18px; font-weight: 800; letter-spacing: -.2px; }
h3 { font-size: 14.5px; font-weight: 700; }
.muted { color: var(--ink2); font-weight: 500; font-size: 12.5px; }
.hide { display: none !important; }

/* ---------- layout ---------- */
.view { padding: 18px 16px var(--nav-clear); max-width: 560px; margin: 0 auto; }
.page-head { margin: 6px 2px 14px; }
.cart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.btn.sm { padding: 7px 13px; font-size: 12.5px; border-radius: 11px; }
.page-head p { color: var(--ink2); font-size: 13px; margin-top: 3px; font-weight: 500; }

/* ---------- bottom nav ---------- */
.bottom-nav {
  position: fixed; bottom: calc(10px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  width: min(94vw, 480px); height: 62px; border-radius: 999px;
  background: rgba(255, 255, 255, .93); backdrop-filter: saturate(1.5) blur(18px); -webkit-backdrop-filter: saturate(1.5) blur(18px);
  display: flex; box-shadow: 0 10px 32px rgba(80, 40, 10, .16), inset 0 0 0 1px rgba(80, 40, 10, .05); z-index: 50;
  padding: 0 6px;
}
.nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #A99D92; transition: color .15s; }
.nav-btn .ico { font-size: 21px; line-height: 1; position: relative; filter: grayscale(1) opacity(.75); transition: all .18s; }
.nav-btn .lbl { font-size: 10px; font-weight: 700; }
.nav-btn.on { color: var(--accent); }
.nav-btn.on .ico { filter: none; transform: translateY(-2px) scale(1.12); }
#cart-badge {
  position: absolute; top: -6px; right: -10px; background: var(--accent); color: #fff;
  min-width: 16px; height: 16px; border-radius: 9px; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* ---------- home ---------- */
.home-head { display: flex; justify-content: space-between; align-items: center; margin: 4px 2px 14px; }
.greet { color: var(--ink2); font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }
.search-fake {
  display: flex; gap: 10px; align-items: center; background: var(--card); border-radius: 16px;
  padding: 14px 16px; color: var(--ink2); font-size: 14px; font-weight: 500; box-shadow: var(--shadow); margin-bottom: 14px;
}

.hero-sec { position: relative; border-radius: 24px; overflow: hidden; margin-bottom: 22px; box-shadow: var(--shadow-lift); cursor: pointer; }
.hero-img .ph { height: 210px; border-radius: 0; }
.hero-txt { position: absolute; inset: auto 0 0 0; padding: 40px 18px 16px; background: linear-gradient(transparent, rgba(20, 8, 0, .82)); color: #fff; }
.hero-tag { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; background: var(--accent); padding: 4px 10px; border-radius: 20px; }
.hero-txt h2 { font-size: 21px; margin-top: 8px; color: #fff; }

/* ---------- rows & cards ---------- */
.row-sec { margin-bottom: 22px; }
.row-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 10px; }
.link { color: var(--accent); font-weight: 700; font-size: 12.5px; }
.hscroll { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll .card { min-width: 168px; max-width: 168px; scroll-snap-align: start; }

.card {
  position: relative; background: var(--card); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); transition: transform .14s, box-shadow .14s; cursor: pointer;
}
.card:active { transform: scale(.965); }
.card-body { padding: 10px 12px 12px; }
.card-body h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; line-height: 1.25; }
.card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.nut { font-size: 11px; font-weight: 700; color: var(--green); background: var(--green-soft); padding: 3px 8px; border-radius: 10px; }
.nut-na { color: var(--ink2); background: #F2EDE7; }
.nut-est { opacity: .8; }

.ph { height: 118px; background: linear-gradient(135deg, #FFE4CE, #FFD5E0); overflow: hidden; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph-hero, .ph-full { height: 100%; }
.ph-fallback { display: flex; align-items: center; justify-content: center; }
.ph-fallback span { font-size: 44px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.15)); }

.fav {
  position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.92); font-size: 16px; color: #C4B8AD; box-shadow: 0 2px 8px rgba(0,0,0,.14);
  display: flex; align-items: center; justify-content: center; transition: transform .12s;
}
.fav.on { color: #E8503A; }
.fav:active { transform: scale(1.25); }
.tier { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 4px 8px; border-radius: 10px; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.tier-protein { background: #7C3AED; } .tier-whole { background: #17853C; } .tier-light { background: #0E9F8A; }
.tier-cheat { background: #E11D48; } .tier-sweet { background: #EC4899; } .tier-drink { background: #0284C7; } .tier-snack { background: #F59E0B; }
.vegdot { position: absolute; bottom: 76px; right: 10px; z-index: 2; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid; background: #fff; display: flex; align-items: center; justify-content: center; }
.vegdot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.vegdot.veg { border-color: #17853C; } .vegdot.veg::after { background: #17853C; }
.vegdot.nonveg { border-color: #B91C1C; } .vegdot.nonveg::after { background: #B91C1C; }
.vegdot.big { position: absolute; bottom: 14px; right: 14px; width: 22px; height: 22px; }
.vegdot.big::after { width: 11px; height: 11px; }

/* ---------- grid (library) ---------- */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.grid .vegdot { bottom: 84px; }
.searchbar { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 15px; padding: 3px 12px; box-shadow: var(--shadow); }
.searchbar input { flex: 1; border: 0; outline: 0; background: none; padding: 11px 0; }
.searchbar button { color: var(--ink2); padding: 8px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  white-space: nowrap; font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: 20px;
  background: var(--card); color: var(--ink2); box-shadow: var(--shadow); transition: all .13s;
}
.chip.on { background: var(--ink); color: #fff; }
.chip:active { transform: scale(.94); }

/* ---------- buttons ---------- */
.btn {
  font-size: 14.5px; font-weight: 800; padding: 13px 18px; border-radius: 15px; transition: transform .12s, opacity .12s;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .55; }
.btn.primary { background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(232, 66, 10, .30); }
.btn.ghost { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.btn.wide { width: 100%; margin-top: 10px; }

/* ---------- recipe full view ---------- */
.recipe-full {
  position: fixed; inset: 0; z-index: 80; background: var(--bg); overflow-y: auto;
  transform: translateY(24px); opacity: 0; transition: all .24s cubic-bezier(.2, .8, .3, 1);
}
.recipe-full.open { transform: none; opacity: 1; }
.rf-hero { position: relative; height: 280px; }
.rf-hero .ph { height: 100%; border-radius: 0 0 28px 28px; }
.rf-back {
  position: fixed; top: 14px; left: 14px; z-index: 5; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.94); font-size: 19px; font-weight: 800; box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.rf-body { padding: 18px 18px 30px; max-width: 560px; margin: 0 auto; }
.rf-body h1 { font-size: 23px; line-height: 1.2; }
.rf-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 14px; }
.pill { font-size: 11.5px; font-weight: 700; background: var(--card); box-shadow: var(--shadow); padding: 6px 11px; border-radius: 14px; color: var(--ink2); }
.rf-sum { color: var(--ink2); font-size: 14px; line-height: 1.55; margin-bottom: 6px; }
.nutri-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 16px; position: relative; }
.nutri-grid.slim { margin: 10px 0; }
.nutri-cell { background: var(--card); border-radius: 14px; padding: 10px 6px; text-align: center; box-shadow: var(--shadow); }
.nutri-cell b { font-size: 16.5px; display: block; }
.nutri-cell span { font-size: 10.5px; color: var(--ink2); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.nutri-badge { grid-column: 1/-1; text-align: center; font-size: 11px; color: var(--ink2); font-weight: 600; }
.badge-ver { color: var(--green); font-weight: 800; }
.badge-est { color: #B45309; font-weight: 800; }
.nutri-loading { grid-column: 1/-1; text-align: center; color: var(--ink2); font-size: 13px; padding: 12px; }
.rf-sec { margin: 18px 0; }
.rf-sec h2 { margin-bottom: 10px; }
.ing-list { list-style: none; background: var(--card); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.ing-list li { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-bottom: 1px solid #F5EEE6; cursor: pointer; transition: background .12s; }
.ing-list li:last-child { border-bottom: 0; }
.ing-list li.have { background: var(--green-soft); }
.ing-check { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
li.have .ing-check { background: var(--green); color: #fff; }
.ing-name { flex: 1; font-weight: 600; font-size: 14px; }
li.have .ing-name { text-decoration: line-through; color: var(--ink2); }
.ing-qty { font-size: 12px; color: var(--ink2); font-weight: 600; }
.rf-cta { display: flex; gap: 10px; margin-top: 12px; }
.rf-cta .primary { flex: 1.4; } .rf-cta .ghost { flex: 1; }
.steps { padding-left: 0; list-style: none; counter-reset: st; }
.steps li { counter-increment: st; display: flex; gap: 12px; padding: 10px 0; font-size: 14px; line-height: 1.5; color: #3D362E; }
.steps li::before {
  content: counter(st); flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.rf-actions { display: flex; gap: 10px; margin-top: 8px; }
.rf-actions .btn { flex: 1; }
.rf-space { height: 30px; }

/* ---------- chat (Cook AI) ---------- */
.chat-log { display: flex; flex-direction: column; gap: 12px; min-height: 40vh; padding-bottom: 24px; }
.chat-full { min-height: calc(100dvh - 220px); }
.msg { max-width: 92%; border-radius: 18px; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; animation: pop .18s ease; }
.msg.me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 6px; font-weight: 600; }
.msg.ai { align-self: flex-start; background: var(--card); box-shadow: var(--shadow); border-bottom-left-radius: 6px; }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } }
.chat-cards { display: flex; gap: 10px; overflow-x: auto; margin-top: 10px; padding: 2px; scrollbar-width: none; }
.chat-cards::-webkit-scrollbar { display: none; }
.chat-cards .card { min-width: 150px; max-width: 150px; }
.chat-cards .vegdot { bottom: 72px; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.chat-input {
  /* clears the floating pill nav: 10px inset + 62px pill + 10px gap */
  position: fixed; bottom: calc(82px + env(safe-area-inset-bottom)); left: 14px; right: 14px;
  max-width: 532px; margin: 0 auto; display: flex; gap: 8px; background: var(--card); border-radius: 18px;
  padding: 7px 7px 7px 16px; box-shadow: var(--shadow-lift); z-index: 40;
}
.chat-input input { flex: 1; border: 0; outline: 0; background: none; }
.send { width: 42px; height: 42px; border-radius: 14px; background: var(--accent); color: #fff; font-size: 16px; flex-shrink: 0; }
.dots i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #D9CCC0; margin-right: 4px; animation: blink 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; transform: translateY(-2px); } }
.plan-grid { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.plan-day { display: flex; align-items: center; gap: 10px; background: var(--bg); border-radius: 12px; padding: 9px 12px; cursor: pointer; }
.plan-day b { font-size: 12px; color: var(--accent); min-width: 58px; }
.plan-day span { flex: 1; font-size: 13px; font-weight: 600; }
.plan-day em { font-style: normal; font-size: 11.5px; color: var(--ink2); font-weight: 700; }

/* ---------- compare ---------- */
.cmp-actions { display: flex; gap: 10px; margin-bottom: 14px; }
.cmp-actions .primary { flex: 1; }
.plans { display: flex; flex-direction: column; gap: 10px; }
.plan-card { background: var(--card); border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow); cursor: pointer; border: 2px solid transparent; position: relative; }
.plan-card.best { border-color: var(--gold); }
.plan-card.sel { border-color: var(--accent); }
.best-tag { position: absolute; top: -10px; left: 14px; background: var(--gold); color: #4A3200; font-size: 10.5px; font-weight: 800; padding: 3px 10px; border-radius: 10px; }
.plan-row { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.plan-total { font-size: 18px; font-weight: 800; color: var(--ink); }
.plan-sub { display: flex; gap: 12px; margin-top: 5px; font-size: 12px; color: var(--ink2); font-weight: 600; align-items: center; }
.src-badge { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 8px; text-transform: uppercase; letter-spacing: .4px; }
.src-badge.live { background: var(--green-soft); color: var(--green); }
.src-badge.est { background: #FDF0DC; color: #B45309; }
.plan-detail { margin-top: 16px; }
.order-block { background: var(--card); border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 12px; }
.order-block h3 { margin-bottom: 8px; font-size: 14px; }
.line-list { list-style: none; }
.line-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid #F5EEE6; font-size: 13.5px; }
.line-list li:last-child { border-bottom: 0; }
.line-list li em { grid-column: 1/-1; font-style: normal; font-size: 11px; color: var(--ink2); }
.line-list li.miss { opacity: .55; }
.cmp-note { font-size: 12px; color: var(--ink2); text-align: center; margin-top: 14px; line-height: 1.5; }
.paste-box { margin-top: 14px; }
.paste-box textarea { width: 100%; border: 0; border-radius: 16px; padding: 14px; box-shadow: var(--shadow); outline: none; resize: vertical; background: var(--card); }

/* ---------- cart ---------- */
.cart-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.cart-list li { display: flex; align-items: center; justify-content: space-between; background: var(--card); border-radius: 15px; padding: 12px 14px; box-shadow: var(--shadow); }
.cart-name b { font-size: 14px; display: block; text-transform: capitalize; }
.cart-name span { font-size: 11.5px; color: var(--ink2); font-weight: 600; }
.stepper { display: flex; align-items: center; gap: 12px; background: var(--bg); border-radius: 12px; padding: 5px 8px; }
.stepper button { width: 26px; height: 26px; border-radius: 9px; background: var(--card); font-size: 15px; font-weight: 800; box-shadow: var(--shadow); }
.stepper b { min-width: 18px; text-align: center; }
.cart-cta { display: flex; gap: 10px; margin-top: 16px; }
.cart-cta .wide { flex: 1; margin-top: 0; }

/* ---------- me ---------- */
.me-head { display: flex; gap: 14px; align-items: center; }
.avatar { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #FF9A62); color: #fff; font-size: 24px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.me-sec { background: var(--card); border-radius: 20px; padding: 16px; box-shadow: var(--shadow); margin-bottom: 14px; }
.me-sec h2 { margin-bottom: 4px; }
.me-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.switch { position: relative; width: 50px; height: 29px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: #E8DFD5; border-radius: 20px; transition: .2s; }
.switch span::after { content: ""; position: absolute; width: 23px; height: 23px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: .2s; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::after { transform: translateX(21px); }
.day-list { list-style: none; margin-top: 10px; }
.day-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #F5EEE6; font-size: 13.5px; }
.day-list li span { flex: 1; }
.day-list li button { color: var(--ink2); padding: 4px 8px; }
.ver { text-align: center; margin-top: 8px; }

/* ---------- signup ---------- */
.signup { position: fixed; inset: 0; z-index: 100; background: linear-gradient(160deg, #FF7A3D, var(--accent) 55%, #C93A05); display: flex; align-items: center; justify-content: center; padding: 22px; transition: opacity .3s; }
.signup.bye { opacity: 0; }
.su-card { background: var(--card); border-radius: 28px; padding: 30px 24px; width: 100%; max-width: 400px; box-shadow: var(--shadow-lift); text-align: center; }
.su-logo { font-size: 46px; margin-bottom: 6px; }
.su-card h1 { font-size: 30px; letter-spacing: -.8px; }
.su-tag { color: var(--ink2); font-size: 13.5px; margin: 4px 0 14px; font-weight: 500; }
.su-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 20px; }
.su-dots i { width: 22px; height: 5px; border-radius: 3px; background: #EFE7DD; transition: .2s; }
.su-dots i.on { background: var(--accent); }
.su-card label { display: block; text-align: left; font-size: 12.5px; font-weight: 700; color: var(--ink2); margin: 12px 0 6px; }
.su-card input { width: 100%; border: 2px solid #F0E8DF; border-radius: 14px; padding: 13px 14px; outline: none; transition: border .15s; }
.su-card input:focus { border-color: var(--accent); }
.su-chips { flex-wrap: wrap; overflow: visible; justify-content: center; }
.su-chips .chip.on { background: var(--accent); color: #fff; }

/* ---------- misc ---------- */
#kp-toast {
  position: fixed; bottom: calc(152px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%) translateY(16px);
  background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600; padding: 11px 18px;
  border-radius: 14px; box-shadow: var(--shadow-lift); opacity: 0; pointer-events: none; transition: all .22s; z-index: 200;
  max-width: 86vw; text-align: center;
}
#kp-toast.show { opacity: 1; transform: translateX(-50%); }
.empty { text-align: center; padding: 44px 20px; }
.empty-emoji { font-size: 52px; margin-bottom: 12px; }
.empty h3 { font-size: 17px; margin-bottom: 6px; }
.empty p { color: var(--ink2); font-size: 13.5px; margin-bottom: 16px; }
.shimmer { background: linear-gradient(90deg, #F3ECE4 25%, #FBF6EF 50%, #F3ECE4 75%); background-size: 400% 100%; animation: shim 1.3s infinite; }
@keyframes shim { to { background-position: -400% 0; } }
.sk-line { height: 12px; border-radius: 6px; margin: 8px 0; }
.sk-line.short { width: 60%; }
.sheet-wrap { position: fixed; inset: 0; z-index: 90; }
.sheet-bg { position: absolute; inset: 0; background: rgba(20, 8, 0, .45); opacity: 0; transition: .2s; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--card); border-radius: 24px 24px 0 0; padding: 10px 18px 26px; transform: translateY(100%); transition: .22s cubic-bezier(.2, .8, .3, 1); max-height: 82dvh; overflow-y: auto; }
.sheet-wrap.open .sheet-bg { opacity: 1; }
.sheet-wrap.open .sheet { transform: none; }
.sheet-grab { width: 40px; height: 4px; border-radius: 2px; background: #E5DCD2; margin: 4px auto 12px; }

@media (min-width: 700px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .rf-hero { height: 340px; }
}

/* ---------- excellence wave ---------- */
.serv-row { display: flex; justify-content: space-between; align-items: center; background: var(--card); border-radius: 15px; padding: 10px 14px; box-shadow: var(--shadow); margin-bottom: 12px; font-weight: 700; font-size: 14px; }
.day-strip {
  display: flex; align-items: center; gap: 6px; width: 100%; background: linear-gradient(90deg, #FFF3E8, #FFE8DC);
  border-radius: 15px; padding: 12px 15px; margin-bottom: 14px; font-size: 13.5px; font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow); text-align: left;
}
.day-strip span { margin-left: auto; color: var(--accent); font-weight: 800; }
.savings {
  background: var(--green-soft); color: var(--green); font-size: 13.5px; font-weight: 700;
  border-radius: 14px; padding: 11px 14px; margin-bottom: 12px; text-align: center;
}
.week-bars { display: flex; gap: 8px; align-items: flex-end; padding: 12px 2px 0; }
.wb { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wb i { width: 100%; max-width: 34px; border-radius: 7px 7px 3px 3px; background: #F0E7DC; display: block; transition: height .3s; }
.wb i.on { background: linear-gradient(180deg, #FF8A50, var(--accent)); }
.wb span { font-size: 10px; font-weight: 700; color: var(--ink2); }
.wb em { font-style: normal; font-size: 9.5px; color: var(--ink2); min-height: 12px; }
#kp-install {
  position: fixed; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  background: var(--ink); color: #fff; border-radius: 16px; padding: 12px 14px;
  display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-lift);
  animation: pop .3s ease;
}
#kp-install span { flex: 1; }
#kp-install button { color: #fff; font-weight: 800; }
#kp-inst-yes { background: var(--accent); border-radius: 10px; padding: 7px 14px; }
#kp-inst-no { opacity: .6; padding: 6px; }
.recipe-full .hscroll .card { min-width: 160px; max-width: 160px; }
.recipe-full .hscroll .vegdot { bottom: 78px; }

/* ---------- final wave ---------- */
#home-ask { cursor: text; }
#home-ask input { flex: 1; border: 0; outline: 0; background: none; font-size: 14px; color: var(--ink); }
#home-ask input::placeholder { color: var(--ink2); }
.su-veg { display: flex; gap: 10px; margin-bottom: 6px; }
.su-vegbtn { flex: 1; border: 2px solid #F0E8DF; border-radius: 14px; padding: 12px 8px; font-weight: 800; font-size: 13.5px; transition: all .15s; }
.su-vegbtn.on { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.shop-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.shop-aisle { background: var(--bg); border-radius: 12px; padding: 9px 12px; font-size: 12.5px; }
.shop-aisle b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); margin-bottom: 4px; }
.shop-aisle span { display: inline-block; background: var(--card); border-radius: 8px; padding: 3px 8px; margin: 2px 3px 2px 0; font-weight: 600; }

.cookmode {
  position: fixed; inset: 0; z-index: 120; background: linear-gradient(170deg, #1F1A14, #33241A);
  color: #FFF6EC; display: flex; flex-direction: column; padding: 18px;
  opacity: 0; transform: translateY(30px); transition: all .22s cubic-bezier(.2,.8,.3,1);
}
.cookmode.open { opacity: 1; transform: none; }
.cm-head { display: flex; align-items: center; gap: 12px; }
.cm-head > div { flex: 1; text-align: center; }
.cm-head b { display: block; font-size: 15px; }
.cm-head span { font-size: 11.5px; opacity: .65; font-weight: 600; }
.cm-head button { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 17px; font-weight: 800; }
.cm-head button.on { background: var(--green); }
.cm-dots { display: flex; gap: 5px; justify-content: center; margin: 14px 0 6px; flex-wrap: wrap; }
.cm-dots i { width: 16px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.18); }
.cm-dots i.done { background: var(--green); }
.cm-dots i.cur { background: var(--gold); }
.cm-step {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: clamp(20px, 4.5vw, 30px); line-height: 1.45; font-weight: 700; padding: 16px 6px; letter-spacing: -.3px;
}
.cm-step.done { opacity: .55; text-decoration: line-through; }
.cm-timer {
  align-self: center; background: rgba(255,255,255,.14); color: #FFD84D; font-size: 16px; font-weight: 800;
  padding: 13px 22px; border-radius: 16px; margin-bottom: 14px;
}
.cm-timer.run { background: rgba(255,216,77,.2); }
.cm-timer.up { background: var(--accent); color: #fff; animation: pulseup 1s infinite; }
@keyframes pulseup { 50% { transform: scale(1.06); } }
.cm-nav { display: flex; gap: 10px; padding-bottom: env(safe-area-inset-bottom); }
.cm-nav button { flex: 1; padding: 16px; border-radius: 16px; font-size: 15px; font-weight: 800; background: rgba(255,255,255,.12); color: #fff; }
.cm-nav button:disabled { opacity: .35; }
.cm-nav .primary { flex: 2; background: var(--accent); box-shadow: 0 6px 20px rgba(232,66,10,.4); }

/* ---------- Zomato-grade cards + global topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 45; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px calc(8px); background: rgba(255,249,242,.92); backdrop-filter: saturate(1.3) blur(12px);
  max-width: 560px; margin: 0 auto;
}
.brand { font-weight: 800; font-size: 15px; letter-spacing: -.3px; }
.vegswitch { display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
.vegswitch input { display: none; }
.vegswitch i { width: 42px; height: 24px; border-radius: 14px; background: #E8DFD5; position: relative; transition: .18s; }
.vegswitch i::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: .18s; box-shadow: 0 2px 5px rgba(0,0,0,.25); }
.vegswitch input:checked + i { background: var(--green); }
.vegswitch input:checked + i::after { transform: translateX(18px); }
.vegswitch b { font-size: 10.5px; font-weight: 800; letter-spacing: .6px; color: var(--ink2); }
.vegswitch input:checked ~ b { color: var(--green); }
.view { padding-top: 6px; }

.card.v2 .ph-wrap { position: relative; }
.card.v2 .ph { height: 150px; }
.card.v2 .ph-grad { position: absolute; inset: 40% 0 0 0; background: linear-gradient(transparent, rgba(15, 6, 0, .88)); pointer-events: none; }
.card.v2 h3.on-img {
  position: absolute; left: 10px; right: 10px; bottom: 8px; color: #fff; font-size: 13.5px; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,.5); letter-spacing: -.1px;
}
.card.v2 .vegdot { bottom: auto; top: 44px; right: 9px; }
.card.v2 .card-body { padding: 8px 10px 10px; }
.card.v2 .card-meta { margin-top: 0; }
.grid .card.v2 .vegdot, .chat-cards .card.v2 .vegdot, .hscroll .card.v2 .vegdot { top: 44px; bottom: auto; }

.brand { display: flex; align-items: center; gap: 8px; }
.brand img { width: 26px; height: 26px; border-radius: 8px; }
.su-logo-img { width: 76px; height: 76px; border-radius: 22px; margin: 0 auto 10px; box-shadow: 0 10px 30px rgba(232,66,10,.3); }

/* v12: detail overlay, category strip, platform avatars */
.rf-hero-grad { position: absolute; inset: 45% 0 0 0; background: linear-gradient(transparent, rgba(12, 5, 0, .82)); border-radius: 0 0 28px 28px; }
.rf-title-onimg { position: absolute; left: 18px; right: 60px; bottom: 16px; color: #fff; font-size: 24px; line-height: 1.15; letter-spacing: -.4px; text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.plat-avs { display: inline-flex; margin-right: 7px; vertical-align: -3px; }
.plat-avs i { width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 10.5px; font-weight: 800; font-style: normal; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; margin-left: -6px; }
.plat-avs i:first-child { margin-left: 0; }

/* v15 batch */
.rf-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; gap: 10px;
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(transparent, rgba(255,249,242,.6) 20%, var(--bg) 55%);
  max-width: 560px; margin: 0 auto;
}
.rf-sticky .primary { flex: 1.6; } .rf-sticky .ghost { flex: 1; }
.rf-sticky .btn { white-space: nowrap; font-size: 13.5px; padding-left: 10px; padding-right: 10px; min-height: 48px; }
.rf-space { height: 84px; }
.big-fav { top: auto !important; bottom: 64px; right: 14px; width: 40px; height: 40px; font-size: 19px; }
.sort-row { display: flex; justify-content: flex-end; margin-top: 8px; }
#lib-sort { border: 0; background: var(--card); box-shadow: var(--shadow); border-radius: 12px; padding: 9px 12px; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink); outline: none; }
.cart-group { margin-bottom: 14px; }
.cart-src { font-size: 11.5px; font-weight: 800; color: var(--ink2); text-transform: uppercase; letter-spacing: .4px; margin: 0 2px 7px; }
.day-strip.resume { background: linear-gradient(90deg, #1F1A14, #33241A); color: #FFF6EC; }
.day-strip.resume span { color: var(--gold); }

/* v18: svg nav, cost pill, protein bar, slim paste */
.nav-btn .ico svg { width: 22px; height: 22px; display: block; }
.nav-btn .ico { filter: none; opacity: .55; }
.nav-btn.on .ico { opacity: 1; color: var(--accent); }
.cost-pill { background: #FFF4D6; color: #8A5A00; }
.day-strip .pbar { flex: 0 0 64px; height: 6px; border-radius: 4px; background: #F0E4D6; overflow: hidden; display: inline-block; margin-left: 8px; }
.day-strip .pbar em { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #FF8A50, var(--accent)); }
.paste-box.slim { margin-top: 16px; }
.paste-box.slim textarea { font-size: 13px; }

/* ============ v18 MOTION SYSTEM — premium feel ============ */
:root { --spring: cubic-bezier(.34, 1.4, .44, 1); --ease-out: cubic-bezier(.22, .9, .3, 1); }

/* view transitions */
.view-enter { animation: viewIn .34s var(--ease-out); }
@keyframes viewIn { from { opacity: 0; transform: translateY(14px); } }

/* staggered card entrance */
.view-enter .hscroll .card:nth-child(1), .view-enter .grid .card:nth-child(1) { animation-delay: .03s; }
.view-enter .hscroll .card:nth-child(2), .view-enter .grid .card:nth-child(2) { animation-delay: .07s; }
.view-enter .hscroll .card:nth-child(3), .view-enter .grid .card:nth-child(3) { animation-delay: .11s; }
.view-enter .hscroll .card:nth-child(4), .view-enter .grid .card:nth-child(4) { animation-delay: .15s; }
.view-enter .hscroll .card:nth-child(n+5), .view-enter .grid .card:nth-child(n+5) { animation-delay: .19s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }

/* button physics */
.btn, .chip, .send { transition: transform .18s var(--spring), box-shadow .18s var(--ease-out), background .15s, color .15s; }
.btn.primary:hover { box-shadow: 0 10px 26px rgba(232, 66, 10, .38); transform: translateY(-1px); }
.btn:active, .send:active { transform: scale(.94); }
.chip:active { transform: scale(.9); }

/* hero ken burns */
.hero-sec .ph img, .rf-hero .ph img { animation: kenburns 14s var(--ease-out) both; }
@keyframes kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }

/* image fade-in on load */
.ph img { animation: imgIn .5s var(--ease-out); }
@keyframes imgIn { from { opacity: 0; } }

/* bottom nav: sliding dot indicator + icon spring */
.nav-btn { position: relative; }
.nav-btn .ico { transition: transform .25s var(--spring), opacity .2s, color .2s; }
.nav-btn:active .ico { transform: scale(.82); }

/* toast spring */
#kp-toast { transition: opacity .25s, transform .3s var(--spring); }

/* chat: chip stagger + bubble spring */
.msg { animation: bubbleIn .32s var(--spring); }
@keyframes bubbleIn { from { transform: translateY(10px) scale(.97); opacity: 0; } }
.chat-chips .chip { animation: cardIn .4s var(--ease-out) backwards; }
.chat-chips .chip:nth-child(1) { animation-delay: .05s; } .chat-chips .chip:nth-child(2) { animation-delay: .1s; }
.chat-chips .chip:nth-child(3) { animation-delay: .15s; } .chat-chips .chip:nth-child(n+4) { animation-delay: .2s; }

/* signup: living gradient + card spring + step slide */
.signup { background: linear-gradient(160deg, #FF7A3D, var(--accent) 45%, #C93A05 80%, #A32E03); background-size: 200% 200%; animation: bgdrift 9s ease-in-out infinite alternate; }
@keyframes bgdrift { to { background-position: 100% 100%; } }
.su-card { animation: suIn .5s var(--spring); }
@keyframes suIn { from { transform: translateY(28px) scale(.96); opacity: 0; } }
.su-card label, .su-card input, .su-chips, .su-veg { animation: cardIn .4s var(--ease-out) backwards; }
.su-card input { animation-delay: .06s; }
.su-dots i { transition: background .25s, width .25s var(--spring); }
.su-dots i.on { width: 30px; }

/* cook mode: step text slide */
.cm-step { animation: stepIn .3s var(--ease-out); }
@keyframes stepIn { from { opacity: 0; transform: translateX(18px); } }

/* switches already transition; sheet + recipe-full already spring */

/* respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* planner + moods */
.pl-head { display: flex; align-items: center; gap: 12px; padding: 18px 16px 8px; max-width: 560px; margin: 0 auto; }
.pl-head .rf-back { position: static; }
.pl-head h1 { font-size: 21px; }
.pl-head > div { flex: 1; }
.pl-regen { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 18px; font-weight: 800; }
.pl-days { max-width: 560px; margin: 6px auto; padding: 0 16px; display: flex; flex-direction: column; gap: 10px; }
.pl-day { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 18px; padding: 10px; box-shadow: var(--shadow); animation: cardIn .4s var(--ease-out) backwards; }
.pl-day:nth-child(1){animation-delay:.02s}.pl-day:nth-child(2){animation-delay:.06s}.pl-day:nth-child(3){animation-delay:.1s}.pl-day:nth-child(4){animation-delay:.14s}.pl-day:nth-child(5){animation-delay:.18s}.pl-day:nth-child(6){animation-delay:.22s}.pl-day:nth-child(7){animation-delay:.26s}
.pl-day-info { flex: 1; display: flex; align-items: center; gap: 12px; cursor: pointer; min-width: 0; }
.pl-thumb .ph { width: 58px; height: 58px; border-radius: 14px; }
.pl-day-info b { display: block; font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: .5px; }
.pl-day-info span { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-day-info em { font-style: normal; font-size: 11.5px; color: var(--ink2); font-weight: 600; }
.pl-swap { width: 38px; height: 38px; border-radius: 12px; background: var(--bg); color: var(--ink2); font-size: 16px; font-weight: 800; flex-shrink: 0; }
.pl-swap:active { transform: rotate(180deg) scale(.9); transition: transform .3s var(--spring); }
.moods { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 14px; scrollbar-width: none; }
.moods::-webkit-scrollbar { display: none; }
.mood { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 64px; background: var(--card); border-radius: 16px; padding: 10px 8px; box-shadow: var(--shadow); font-size: 22px; transition: transform .18s var(--spring); }
.mood:active { transform: scale(.92); }
.mood span { font-size: 10px; font-weight: 700; color: var(--ink2); }

/* v20: pantry, streak, thumbs, breakdown */
.pa-body { max-width: 560px; margin: 12px auto 0; padding: 0 16px; }
.pa-chips .chip.on { background: var(--green); color: #fff; }
.pa-list { display: flex; flex-direction: column; gap: 10px; }
.pa-match { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 18px; padding: 10px; box-shadow: var(--shadow); animation: cardIn .35s var(--ease-out) backwards; }
.pa-match-main { flex: 1; display: flex; gap: 12px; align-items: center; cursor: pointer; min-width: 0; }
.pa-match-main span { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-match-main b { display: inline-block; font-size: 11px; color: var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 2px 8px; margin-top: 3px; }
.pa-match-main b.full { color: var(--green); background: var(--green-soft); }
.pa-match-main em { display: block; font-style: normal; font-size: 11.5px; color: var(--ink2); margin-top: 3px; }
.pa-match-main em.full { color: var(--green); font-weight: 700; }
.pa-add { background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 800; border-radius: 12px; padding: 10px 10px; flex-shrink: 0; }
.streak { font-size: 11px; font-weight: 800; background: linear-gradient(90deg, #FFEDD5, #FFE1C2); color: #B45309; padding: 3px 9px; border-radius: 10px; margin-left: 6px; }
.fb { margin-left: auto; display: inline-flex; gap: 4px; align-self: center; }
.fb button { opacity: .45; font-size: 13px; padding: 4px; transition: all .15s var(--spring); }
.fb button:hover { opacity: 1; transform: scale(1.2); }
.fb-done { font-style: normal; font-size: 11px; color: var(--ink2); font-weight: 700; }

.hero-cta { display: inline-block; margin-top: 8px; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); color: #fff; font-size: 12px; font-weight: 800; padding: 7px 14px; border-radius: 12px; }

.from-chip { font-style: normal; font-size: 11px; background: rgba(255,255,255,.25); border-radius: 8px; padding: 2px 7px; margin-left: 4px; }

.topbar { gap: 8px; }

/* ===== v22: paste list, report card, heatmap, deals, mic, a11y ===== */
.paste-sheet textarea{width:100%;background:var(--card);color:inherit;border:1px solid #EADFD3;border-radius:12px;padding:12px;font:inherit;resize:vertical;margin:10px 0 4px}
.paste-sheet textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.sheet-cta{display:flex;gap:10px;margin-top:10px}
.sheet-cta .btn{flex:1}

.report-card{margin-top:14px;padding:14px;border-radius:16px;background:linear-gradient(135deg,rgba(23,133,60,.10),rgba(23,133,60,.02));border:1px solid rgba(23,133,60,.22)}
.rc-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rc-grade{font-size:28px;font-weight:800;padding:6px 14px;border-radius:12px;background:rgba(23,133,60,.16)}
.rc-grade.g-c,.rc-grade.g-d,.rc-grade.g-e{background:rgba(245,158,11,.18)}
.rc-line{margin:8px 0 6px;font-weight:600}
.rc-stats{display:flex;flex-direction:column;gap:4px;font-size:13px;opacity:.9;margin-bottom:10px}

.heatmap-sec{margin-top:14px}
.heatmap{display:grid;grid-template-columns:repeat(14,1fr);gap:4px;margin-top:6px}
.heatmap .hm{aspect-ratio:1;border-radius:4px;background:#F1E9DE}
.heatmap .hm.l1{background:rgba(23,133,60,.32)}
.heatmap .hm.l2{background:rgba(23,133,60,.58)}
.heatmap .hm.l3{background:rgba(23,133,60,.92)}

.deals-sec{margin:10px 0 2px}
.deals-head{font-weight:700;margin:0 0 8px;display:flex;align-items:center;gap:8px}
.badge-est{font-size:10px;font-style:normal;color:var(--ink2);border:1px solid #E4D9CC;border-radius:6px;padding:1px 6px}
.deals-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.deals-row::-webkit-scrollbar{display:none}
.deal-chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border-radius:14px;background:var(--card);border:1px solid rgba(23,133,60,.22);color:inherit;position:relative;min-width:140px;box-shadow:var(--shadow)}
.deal-chip b{text-transform:capitalize}
.deal-chip span{font-size:12px;opacity:.8}
.deal-chip em{position:absolute;top:8px;right:8px;font-style:normal;font-size:11px;font-weight:800;color:var(--green)}

.chat-input .mic{background:none;border:none;font-size:20px;padding:0 6px;cursor:pointer;border-radius:50%}
.chat-input .mic.listening{animation:micpulse 1.2s ease-in-out infinite}
@keyframes micpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.6}}

.recent-chips{margin:-2px 0 6px}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion: reduce){.chat-input .mic.listening{animation:none}}

/* ===== v23 ===== */
.cm-head #cm-tts{opacity:.45;font-size:18px;background:none;border:none;cursor:pointer}
.cm-head #cm-tts.on{opacity:1;filter:drop-shadow(0 0 6px rgba(23,133,60,.7))}
.lib-head{display:flex;align-items:center;justify-content:space-between}
.lib-head .dice{font-size:26px;background:var(--card);border:1px solid #EFE6DA;border-radius:14px;padding:8px 12px;cursor:pointer;transition:transform .2s;box-shadow:var(--shadow)}
.lib-head .dice:active{transform:rotate(180deg) scale(.9)}

/* ===== v24: planner 3-meals/day ===== */
.pl-day{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:10px 12px}
.pl-day-head,.pl-meal{width:100%}
.pl-day-head b{margin-right:8px}
.pl-day-head{display:flex;justify-content:space-between;align-items:baseline;padding:4px 2px 8px}
.pl-day-head b{font-size:15px}
.pl-day-head em{font-style:normal;font-size:11px;opacity:.65}
.pl-meal{display:flex;align-items:center;gap:10px;padding:7px 2px;border-top:1px solid rgba(0,0,0,.05);cursor:pointer}
.pl-meal .pl-thumb{width:44px;height:44px;flex:0 0 44px;border-radius:10px;overflow:hidden}
.pl-meal .pl-thumb .ph,.pl-meal .pl-thumb img{width:100%;height:100%;object-fit:cover}
.pl-meal-txt{flex:1;display:flex;flex-direction:column;min-width:0}
.pl-meal-txt i{font-style:normal;font-size:10px;opacity:.6}
.pl-meal-txt span{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-meal-txt em{font-style:normal;font-size:11px;opacity:.65}
.pl-meal .pl-swap{flex:0 0 auto}

/* ===== v25: premium polish layer (CRED/Zomato bar) ===== */
/* images: skeleton base + fade-in when loaded — no pop-in */
.ph{background:linear-gradient(110deg,rgba(0,0,0,.05) 8%,rgba(0,0,0,.09) 18%,rgba(0,0,0,.05) 33%);background-size:200% 100%;animation:phshimmer 1.4s linear infinite}
.ph img{opacity:0;transition:opacity .5s cubic-bezier(.22,.61,.36,1)}
.ph img.ld{opacity:1}
.ph.ph-fallback{animation:none}
@keyframes phshimmer{to{background-position-x:-200%}}

/* view transitions: calm, fast, never bouncy */
.view.vt{animation:viewin .26s cubic-bezier(.22,.61,.36,1)}
@keyframes viewin{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}

/* topbar: glass */
.topbar{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* typography discipline */
.page-head h1,.home-head h1{letter-spacing:-.02em;font-weight:800}
.row-sec>h2,.me-sec h2{letter-spacing:-.01em;font-weight:700;font-size:16px}
.muted{opacity:.62}

/* cards: soft depth, honest press feedback */
.card{box-shadow:0 1px 2px rgba(16,10,4,.04),0 6px 18px rgba(16,10,4,.05);transition:transform .18s cubic-bezier(.22,.61,.36,1),box-shadow .18s}
.card:active{transform:scale(.977)}
.btn,.chip,.mood,.deal-chip,.nav-btn{transition:transform .16s cubic-bezier(.22,.61,.36,1),background .16s,opacity .16s}
.btn:active,.chip:active,.act-card:active,.mood:active,.deal-chip:active{transform:scale(.96)}

/* toast: quiet, floating, glass */


/* hero: gentle depth */
.hero-sec{box-shadow:0 10px 34px rgba(16,10,4,.10)}

@media (prefers-reduced-motion: reduce){
  .view.vt,.ph{animation:none}
  .ph img{transition:none;opacity:1}
  .card,.btn,.chip,.act-card,.mood,.deal-chip{transition:none}
}

/* ===== v26: video-only recipe card ===== */
.vo-card{padding:16px;border-radius:16px;background:var(--kp-accent-tint,#FCEAE1);border:1px solid rgba(232,66,10,.18)}
.vo-card b{display:block;margin-bottom:6px}
.vo-card .btn{margin-top:12px}

/* ===== v27 audit fixes ===== */
.su-skip{background:none;border:none;color:inherit;opacity:.55;font:inherit;font-size:13px;margin-top:12px;cursor:pointer;text-decoration:underline}
.rf-sum.clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.undo-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:12px;background:rgba(0,0,0,.06);margin-bottom:10px;font-size:13px}
.undo-bar button{background:none;border:none;color:#E8420A;font-weight:800;cursor:pointer;font:inherit}
#cart-badge.bump{animation:cbump .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes cbump{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}

/* ===== v28: card v3 — 3 anchors, quiet metadata (designer spec) ===== */
.card.v3 .ph-grad,.card.v3 .tier,.card.v3 .on-img,.card.v3 .vegdot{display:none}
.card.v3 .ph-wrap{aspect-ratio:16/10;border-radius:14px 14px 0 0;overflow:hidden;position:relative}
.card.v3 .card-body{padding:10px 12px 12px}
.card.v3 .card-title{font-size:13.5px;font-weight:700;line-height:1.25;margin:0 0 3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink,#1F1A14)}
.card.v3 .card-meta2{font-size:11px;opacity:.62;margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.v3 .tiertxt{font-size:10px;font-weight:700;opacity:.55;text-transform:uppercase;letter-spacing:.04em}
.card.v3 .densechip{display:inline-block;font-size:10px;font-weight:800;padding:2px 8px;border-radius:8px;background:var(--kp-live-tint,#E4F3E9);color:var(--kp-live,#0F8A3D)}
.vegmark{position:absolute;top:8px;left:8px;width:16px;height:16px;border-radius:4px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.vegmark i{width:8px;height:8px;border-radius:50%}
.vegmark.veg{border:1.5px solid #0f8a3d}.vegmark.veg i{background:#0f8a3d}
.vegmark.nonveg{border:1.5px solid #b3261e}.vegmark.nonveg i{background:#b3261e}
.card.v3 .fav{top:6px;right:6px}
.card.v3 .nut,.card.v3 .card-meta{display:none}

/* chat: centered column on desktop, full-bleed mobile; chips scroll one line */
.chat-log,.chat-input{max-width:680px;margin-left:auto;margin-right:auto}
@media (min-width:700px){.chat-input{left:50%;transform:translateX(-50%);width:min(680px,92vw)}}
.chat-chips{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:8px;padding-bottom:2px}
.chat-chips::-webkit-scrollbar{display:none}
.chat-chips .chip{flex:0 0 auto}

/* toast above the chat input, never behind it */


/* mobile scale pass (designer spec) */
@media (max-width:420px){
  .view{padding-left:14px;padding-right:14px}
  .home-head h1{font-size:22px}
  .page-head h1{font-size:20px}
      .card{flex-basis:46%}
  .row-sec>h2,.me-sec h2{font-size:15px}
  .chat-input input{font-size:15px}
}
@media (max-width:360px){
  .card{flex-basis:60%}
  }

/* tone down emoji tile icons — smaller, quieter (anti-gimmick) */
.mood{filter:saturate(.7)}

/* ===== v29: badge redesign, tip label, resume card, play chip, admin ===== */
/* tier text: quiet ink, never a highlighter box */
.card.v3 .tiertxt{background:none !important;color:inherit;opacity:.5;padding:0;border-radius:0}
.tier,.tier-whole,.tier-light,.tier-sweet,.tier-protein,.tier-cheat{background:none}

.daytip{display:flex;align-items:baseline;gap:8px;font-size:13px;opacity:.8}
.tiplabel{font-size:9px;font-weight:800;letter-spacing:.08em;color:#E8420A;border:1px solid rgba(232,66,10,.35);border-radius:6px;padding:1px 6px;flex:0 0 auto}

.resume-card{display:grid;grid-template-columns:1fr auto;gap:2px 10px;width:100%;text-align:left;padding:14px 16px;border-radius:16px;border:1px solid rgba(232,66,10,.25);background:linear-gradient(135deg,rgba(232,66,10,.07),transparent);margin:10px 0;cursor:pointer;font:inherit;color:inherit}
.resume-card .rc-label{grid-column:1/-1;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#E8420A}
.resume-card .rc-dish{font-weight:700;font-size:15px}
.resume-card .rc-step{font-size:12px;opacity:.65;align-self:center}
.resume-card .rc-bar{grid-column:1/-1;height:4px;border-radius:2px;background:rgba(0,0,0,.08);overflow:hidden;margin-top:6px}
.resume-card .rc-bar em{display:block;height:100%;border-radius:2px;background:#E8420A}

.playchip{position:absolute;bottom:14px;right:14px;font:inherit;font-size:12px;font-weight:700;padding:7px 12px;border-radius:999px;border:none;background:rgba(255,255,255,.92);color:#1F1A14;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.25)}

.ad-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 2px;margin-bottom:8px}
.ad-cell{background:var(--card,#fff);border-radius:14px;padding:12px 8px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.ad-cell b{display:block;font-size:19px}
.ad-cell span{font-size:10px;opacity:.6}
.ad-table{width:100%;font-size:11px;border-collapse:collapse}
.ad-table th,.ad-table td{padding:5px 6px;text-align:right;border-bottom:1px solid rgba(0,0,0,.06)}
.ad-table th:first-child,.ad-table td:first-child{text-align:left}
.ad-setup{font-size:13px;line-height:1.7;padding:12px;border-radius:12px;background:rgba(0,0,0,.05)}
.ad-links{display:flex;flex-direction:column;gap:10px;margin-top:10px}
@media (max-width:420px){.ad-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== v30: motion suite — expressive but never gimmicky ===== */
/* burst particles */
.kp-burst{position:fixed;z-index:9999;pointer-events:none;width:0;height:0}
.kp-burst i{position:absolute;width:9px;height:9px;border-radius:2px;animation:kpburst .9s cubic-bezier(.16,.84,.44,1) forwards}
@keyframes kpburst{0%{transform:translate(0,0) rotate(0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.4);opacity:0}}

/* signup choreography: card spring in, fields stagger, exit = circle wipe */
.signup .su-card{animation:sucard .55s cubic-bezier(.2,.9,.3,1.15)}
@keyframes sucard{from{opacity:0;transform:translateY(28px) scale(.94)}to{opacity:1;transform:none}}
.signup .su-card>*{animation:sufield .45s cubic-bezier(.22,.61,.36,1) backwards}
.signup .su-card>*:nth-child(2){animation-delay:.05s}
.signup .su-card>*:nth-child(3){animation-delay:.1s}
.signup .su-card>*:nth-child(4){animation-delay:.15s}
.signup .su-card>*:nth-child(5){animation-delay:.2s}
.signup .su-card>*:nth-child(6){animation-delay:.25s}
.signup .su-card>*:nth-child(7){animation-delay:.3s}
.signup .su-card>*:nth-child(8){animation-delay:.35s}
@keyframes sufield{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.signup .su-logo-img{animation:sulogo 3.2s ease-in-out infinite}
@keyframes sulogo{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.signup .su-dots i{transition:width .3s cubic-bezier(.2,.9,.3,1.2),background .3s}
.signup.bye{animation:subye .6s cubic-bezier(.7,0,.84,0) forwards}
@keyframes subye{0%{clip-path:circle(120% at 50% 62%);opacity:1}100%{clip-path:circle(0% at 50% 62%);opacity:.6}}

/* directional view slides */
.view.vt.vt-l{animation:vtl .3s cubic-bezier(.22,.61,.36,1)}
.view.vt.vt-r{animation:vtr .3s cubic-bezier(.22,.61,.36,1)}
@keyframes vtl{from{opacity:.001;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes vtr{from{opacity:.001;transform:translateX(-26px)}to{opacity:1;transform:none}}

/* nav icon pop on activation */
.nav-btn.on .ico{animation:navpop .35s cubic-bezier(.2,.9,.3,1.4)}
@keyframes navpop{0%{transform:scale(.82)}60%{transform:scale(1.14)}100%{transform:scale(1)}}

/* sheets spring up with slight overshoot */
.sheet-wrap.open .sheet,#kp-sheet.open .sheet{animation:sheetup .42s cubic-bezier(.2,.9,.3,1.12)}
@keyframes sheetup{from{transform:translateY(60px);opacity:.4}to{transform:none;opacity:1}}

/* toast springs */
#kp-toast.show{animation:toastin .38s cubic-bezier(.2,.9,.3,1.25)}
@keyframes toastin{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}

.pantrychip.on{background:#0f8a3d;color:#fff;border-color:#0f8a3d}

@media (prefers-reduced-motion: reduce){
  .signup .su-card,.signup .su-card>*,.signup .su-logo-img,.signup.bye,.view.vt.vt-l,.view.vt.vt-r,.nav-btn.on .ico,.sheet-wrap.open .sheet,#kp-sheet.open .sheet,#kp-toast{animation:none}
}

/* v30.1: single-meal swap feedback */
.pl-meal.swapped{animation:mealswap .45s cubic-bezier(.2,.9,.3,1.15)}
@keyframes mealswap{0%{opacity:0;transform:translateX(18px) scale(.97)}100%{opacity:1;transform:none}}

/* ===== v31: casing + data honesty + rank chips ===== */
.ing-name,.cart-name b,.shop-aisle span,.pa-match-main,.pl-count,.deal-chip b{text-transform:capitalize}
.data-note{font-size:12px;padding:8px 12px;border-radius:10px;background:rgba(245,158,11,.12);color:#92600a;margin:6px 0 10px}
.rank-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:4px 0 10px}

/* ===== v32: the brutal declutter — CRED/Swiggy discipline ===== */
/* spacing scale: sections breathe */
.view{padding:18px 18px var(--nav-clear)}
.row-sec{margin:30px 0 0}
.row-head{margin-bottom:12px}
.page-head{margin-bottom:18px}
.home-head{margin-bottom:6px}
.home-head h1{font-size:26px;letter-spacing:-.03em}

/* quick tiles: quiet text pills, no emoji circus */

/* moods: text pills */
.moods{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:14px 0 0}
.moods::-webkit-scrollbar{display:none}
.mood{flex:0 0 auto;padding:9px 15px;border-radius:999px;background:transparent;border:1px solid rgba(0,0,0,.12);font-weight:600;font-size:13px;filter:none}
.mood span{font-size:13px}

/* hero: bigger, calmer */
.hero-sec{border-radius:22px;overflow:hidden;margin-top:22px}
.hero-txt h2{font-size:21px;letter-spacing:-.02em}
.hero-tag{font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:800}

/* nav: Swiggy-style active pill */
.bottom-nav{padding:4px 8px}
.nav-btn{position:relative;border-radius:14px}
.nav-btn .lbl{font-size:10px;font-weight:700;letter-spacing:.01em}
.nav-btn.on{background:rgba(232,66,10,.09)}
.nav-btn.on .lbl{color:#E8420A}

/* planner meal slot label: small caps text, not emoji */
.pl-meal-txt i{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.5}

/* coach: capability story cards */

/* buttons: one system */
.btn{border-radius:999px;font-weight:700}
.btn.primary{box-shadow:0 6px 18px rgba(232,66,10,.25)}
.btn.ghost{border:none;background:rgba(0,0,0,.05)}

/* deal chips quieter */
.deal-chip{border-color:rgba(0,0,0,.08)}
.deal-chip em{color:#0f8a3d}

@media (prefers-reduced-motion: reduce){}

/* home: educating action grid (CRED-quiet, no stickers) */
.home-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 8px}
.act-card{position:relative;text-align:left;background:var(--card,#fff);border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:14px 14px 30px;display:flex;flex-direction:column;gap:4px;box-shadow:0 2px 10px rgba(16,10,4,.04);cursor:pointer;transition:transform .16s cubic-bezier(.22,.61,.36,1),box-shadow .16s}
.act-card b{font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.act-card span{font-size:11.5px;line-height:1.45;color:var(--ink2);font-weight:500}
.act-card i{position:absolute;right:13px;bottom:10px;font-style:normal;font-weight:800;color:var(--accent);font-size:14px}
.act-card:active{transform:scale(.97)}
.act-card.a1{background:linear-gradient(135deg,#221b12,#3a2c1c);border-color:transparent;box-shadow:0 8px 22px rgba(31,26,20,.22)}
.act-card.a1 b{color:#fff}
.act-card.a1 span{color:rgba(255,255,255,.72)}
.act-card.a1 i{color:#F5A623}
.search-fake .si{display:flex;align-items:center;color:var(--ink2)}
.view-enter .act-card{animation:cardIn .45s var(--ease-out) backwards}
.view-enter .act-card:nth-child(1){animation-delay:.02s}.view-enter .act-card:nth-child(2){animation-delay:.06s}
.view-enter .act-card:nth-child(3){animation-delay:.1s}.view-enter .act-card:nth-child(4){animation-delay:.14s}

/* monogram tiles: the honest no-photo state (never emoji, never blank grey) */
.ph-mono{display:flex;align-items:center;justify-content:center}
.ph-mono span{font-size:34px;font-weight:800;letter-spacing:-.02em;color:rgba(255,255,255,.92);text-shadow:0 1px 6px rgba(0,0,0,.12)}
.pl-thumb .ph-mono span{font-size:19px}
.ph-mono.t0{background:linear-gradient(135deg,#E8420A,#c93a12)}
.ph-mono.t1{background:linear-gradient(135deg,#0f8a3d,#0a6b2e)}
.ph-mono.t2{background:linear-gradient(135deg,#F5A623,#d98b0f)}
.ph-mono.t3{background:linear-gradient(135deg,#7c5cbf,#5b3fa0)}
.ph-mono.t4{background:linear-gradient(135deg,#1F6F8B,#155a72)}
.searchbar .si{display:flex;align-items:center;color:var(--ink2)}

/* Cook Mode scenes: the step you read is the step you SEE */
.cm-scene{display:flex;justify-content:center;margin:6px 0 2px;animation:sceneIn .4s cubic-bezier(.2,.8,.3,1) backwards}
@keyframes sceneIn{0%{opacity:0;transform:translateY(8px) scale(.96)}100%{opacity:1;transform:none}}
.cm-scene .scn{width:200px;height:110px;color:var(--ink)}
.cm-scene .ln{stroke:currentColor;stroke-width:2.5;opacity:.85}
.cm-scene .flame{stroke:var(--accent);stroke-width:2.4;transform-origin:106px 112px;animation:flick 1.1s ease-in-out infinite}
@keyframes flick{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.18) translateY(-1px)}}
.cm-scene .heat{stroke:var(--accent);stroke-width:2;opacity:0;animation:heatup 1.6s ease-out infinite}
.cm-scene .h2{animation-delay:.5s}.cm-scene .h3{animation-delay:1s}
@keyframes heatup{0%{opacity:0;transform:translateY(4px)}30%{opacity:.7}100%{opacity:0;transform:translateY(-10px)}}
.cm-scene .tossbit{fill:var(--accent);animation:tossup 1.5s cubic-bezier(.3,.6,.4,1) infinite}
.cm-scene .t2{animation-delay:.18s}.cm-scene .t3{animation-delay:.36s}
@keyframes tossup{0%,100%{transform:translateY(0)}38%{transform:translateY(-26px)}}
.cm-scene .spark{fill:var(--amber,#F5A623);opacity:0;animation:pop2 1s ease-out infinite}
.cm-scene .s2{animation-delay:.25s}.cm-scene .s3{animation-delay:.5s}.cm-scene .s4{animation-delay:.75s}
@keyframes pop2{0%{opacity:0;transform:translateY(4px) scale(.6)}35%{opacity:1;transform:translateY(-8px) scale(1.15)}100%{opacity:0;transform:translateY(-16px) scale(.8)}}
.cm-scene .grain{fill:var(--ink2);opacity:0;animation:fall 1.4s linear infinite}
.cm-scene .g2{animation-delay:.25s}.cm-scene .g3{animation-delay:.5s}.cm-scene .g4{animation-delay:.75s}.cm-scene .g5{animation-delay:1s}
@keyframes fall{0%{opacity:0;transform:translateY(0)}15%{opacity:.9}100%{opacity:0;transform:translateY(38px)}}
.cm-scene .pinch{transform-origin:110px 30px;animation:pinchTilt 1.4s ease-in-out infinite}
@keyframes pinchTilt{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}}
.cm-scene .bub{fill:none;stroke:currentColor;stroke-width:2;opacity:0;animation:rise 1.8s ease-in infinite}
.cm-scene .u2{animation-delay:.4s}.cm-scene .u3{animation-delay:.9s}.cm-scene .u4{animation-delay:1.3s}
@keyframes rise{0%{opacity:0;transform:translateY(4px) scale(.7)}30%{opacity:.8}100%{opacity:0;transform:translateY(-26px) scale(1.1)}}
.cm-scene .lid{transform-origin:110px 50px;animation:lidTap 2.2s ease-in-out infinite}
@keyframes lidTap{0%,80%,100%{transform:translateY(0)}88%{transform:translateY(-3px) rotate(.6deg)}}
.cm-scene .wisp{stroke:var(--ink2);stroke-width:2;opacity:0;animation:wispup 2.4s ease-out infinite}
.cm-scene .w2{animation-delay:.7s}.cm-scene .w3{animation-delay:1.3s}
@keyframes wispup{0%{opacity:0;transform:translateY(6px)}30%{opacity:.6}100%{opacity:0;transform:translateY(-12px)}}
.cm-scene .knife{transform-origin:84 64px;animation:rockchop .55s ease-in-out infinite}
@keyframes rockchop{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg) translateY(-4px)}}
.cm-scene .bit{fill:var(--accent);animation:scoot 1.6s ease-out infinite}
.cm-scene .b2{animation-delay:.2s}.cm-scene .b3{animation-delay:.4s}
@keyframes scoot{0%{opacity:0;transform:translateX(-8px)}30%{opacity:1}100%{opacity:1;transform:translateX(6px)}}
.cm-scene .whisk{transform-origin:110px 40px;animation:whisking .7s ease-in-out infinite}
@keyframes whisking{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
.cm-scene .swirl{stroke:var(--accent);stroke-width:2.4;stroke-dasharray:60;animation:swirl 1.6s linear infinite}
@keyframes swirl{0%{stroke-dashoffset:120}100%{stroke-dashoffset:0}}
.cm-scene .dough{stroke:currentColor;stroke-width:2.5;fill:none;transform-origin:110px 88px;animation:squish 1.2s ease-in-out infinite}
@keyframes squish{0%,100%{transform:scale(1,1)}50%{transform:scale(1.12,.82)}}
.cm-scene .press{opacity:0;animation:pressin 1.2s ease-in-out infinite}
.cm-scene .p2{animation-delay:.6s}
@keyframes pressin{0%,100%{opacity:0;transform:translateY(-4px)}50%{opacity:.8;transform:translateY(2px)}}
.cm-scene .stream{stroke:var(--accent);stroke-width:3;stroke-dasharray:8 6;animation:streamflow .5s linear infinite}
@keyframes streamflow{0%{stroke-dashoffset:14}100%{stroke-dashoffset:0}}
.cm-scene .ripple{stroke:var(--accent);stroke-width:2;fill:none;animation:ripple2 1.4s ease-out infinite}
@keyframes ripple2{0%{opacity:.8;transform:scale(.4)}100%{opacity:0;transform:scale(1.5)}}
.cm-scene .roastp{animation:sizzleShake 1.8s ease-in-out infinite}
@keyframes sizzleShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-1.5px)}75%{transform:translateX(1.5px)}}
.cm-scene .spoon{transform-origin:110px 70px;animation:stirring 1.5s ease-in-out infinite}
@keyframes stirring{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(12deg)}}
.cm-scene .restdot{fill:var(--ink2);opacity:.25;animation:restpulse 2.4s ease-in-out infinite}
.cm-scene .r2{animation-delay:.4s}.cm-scene .r3{animation-delay:.8s}
@keyframes restpulse{0%,100%{opacity:.15}50%{opacity:.75}}
@media (prefers-reduced-motion:reduce){.cm-scene *{animation:none!important}.cm-scene .heat,.cm-scene .grain,.cm-scene .bub,.cm-scene .wisp,.cm-scene .spark,.cm-scene .press{opacity:.5}}

.std-note{background:var(--accent-soft,#FCEAE1);color:var(--accent,#E8420A);font-size:12px;font-weight:600;padding:9px 12px;border-radius:12px;margin:0 0 10px;line-height:1.4}
.rep-tag{position:absolute;top:10px;right:10px;z-index:2;background:rgba(24,18,12,.55);color:#F5A623;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:8px;font-style:normal}
.plan-sec{border:1.5px solid rgba(232,66,10,.25)}
.plan-pill{display:inline-block;background:var(--accent);color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.08em;padding:3px 7px;border-radius:7px;vertical-align:2px;margin-left:6px}
.plan-feats{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.plan-feat b{display:block;font-size:14px}
.plan-feat span{font-size:12.5px;color:var(--ink2)}
.plan-note{font-size:12.5px;color:var(--ink2);line-height:1.5;margin-top:6px}
.plan-offer{background:linear-gradient(120deg,#1F1A14,#3a2c1c);color:#FBF4EC;border-radius:14px;padding:12px 14px;margin-bottom:10px}
.plan-offer b{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#F5A623;margin-bottom:3px}
.plan-offer span{font-size:13.5px;line-height:1.4}
.plan-col-h{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin:12px 0 8px}
.plan-col-h.pro{color:var(--accent)}

/* AI-generated recipe block (Cook AI answers for dishes not in the library) */
.ai-recipe { background: #fff; border-radius: 14px; padding: 12px 14px; margin: 10px 0 4px; box-shadow: 0 1px 4px rgba(20,10,0,.06); }
.ai-recipe > b { display: block; font-size: 16px; margin: 6px 0 2px; }
.ai-recipe > em { display: block; font-style: normal; font-size: 12px; color: #8a7f74; margin-bottom: 8px; }
.ai-recipe .ai-ing { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.ai-recipe .ai-ing span { background: #FFF3E9; border-radius: 8px; padding: 4px 9px; font-size: 12.5px; }
.ai-recipe .ai-steps { margin: 0; padding-left: 20px; }
.ai-recipe .ai-steps li { font-size: 13.5px; line-height: 1.45; margin-bottom: 6px; }

/* home action pills (declutter: 2x2 compact, no subtitles) */
.home-actions.pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 4px; }
.home-actions.pills .act-card { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 12px; }
.home-actions.pills .act-card b { font-size: 13.5px; }
.home-actions.pills .act-card span, .home-actions.pills .act-card i { display: none; }

/* plan sheet: Rs9 hero + comparison table */
.plan-hero { text-align: center; padding: 6px 0 14px; }
.plan-hero .ph-badge { display: inline-block; font: 800 10.5px/1 inherit; letter-spacing: .14em; color: #E8420A; background: #FFEDE4; border-radius: 999px; padding: 6px 12px; }
.plan-hero .ph-price { font-size: 76px; font-weight: 800; letter-spacing: -.05em; line-height: 1.05; margin: 8px 0 2px; }
.plan-hero .ph-price em { font-style: normal; font-size: 34px; vertical-align: 22px; margin-right: 2px; }
.plan-hero .ph-price.ok { color: #0F8A3D; font-size: 54px; }
.plan-hero .ph-line { color: #6f6459; font-size: 14px; margin: 0 0 12px; }
.plan-hero .ph-line s { opacity: .6; margin-left: 4px; }
.plan-hero .ph-cta { display: block; }
.plan-hero .ph-claim { background: none; border: none; color: #8a7f74; font-size: 12.5px; text-decoration: underline; margin-top: 10px; }
.ph-utr { display: flex; gap: 8px; margin-top: 10px; }
.ph-utr input { flex: 1; min-width: 0; border: 1.5px solid #e7dccf; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; background: #fff; }
.plan-table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 13.5px; }
.plan-table th { text-align: center; font: 800 11px/1 inherit; letter-spacing: .1em; text-transform: uppercase; color: #8a7f74; padding: 8px 4px; }
.plan-table th.pro, .plan-table td.pro { background: #FFF7F2; }
.plan-table th:first-child { text-align: left; }
.plan-table td { padding: 9px 4px; border-top: 1px solid #f0e7db; text-align: center; }
.plan-table td:first-child { text-align: left; font-weight: 600; }
.plan-table .pt-y { color: #0F8A3D; font-weight: 800; }
.plan-table .pt-n { color: #c9beb2; }
.plan-table .pt-t { font-size: 12px; }
.order-links { display: flex; gap: 8px; margin: 10px 0 4px; }
.order-links .btn { flex: 1; text-align: center; text-decoration: none; display: flex; align-items: center; justify-content: center; min-height: 44px; }
.dp-row { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 2px; }
.dp-slot { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #a4988a; }
.dp-meta { font-size: 12px; color: #6f6459; font-weight: 700; }
.dp-total { font-size: 13px; font-weight: 700; margin: 10px 0 2px; }
.rf-share { position: absolute; top: 14px; right: 14px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.92); border: none; font-size: 17px; box-shadow: 0 1px 5px rgba(20,10,0,.14); }

/* ---- v50 cook companion ---- */
.cm-buddy-wrap{margin:10px 16px 0;display:flex;flex-direction:column;gap:8px}
.cm-buddy{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px 12px;color:#FFF6EC;font-size:14px;line-height:1.45}
.cm-buddy .cmb-tag{display:block;font-style:normal;font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.55;margin-bottom:2px}
.cm-buddy .cmb-line.fresh{animation:cmbIn .35s ease-out}
@keyframes cmbIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.cm-ask{display:flex;gap:6px;align-items:center}
.cm-ask input{flex:1;min-width:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:9px 14px;color:#FFF6EC;font-size:13px}
.cm-ask input::placeholder{color:rgba(255,246,236,.45)}
.cm-ask button{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.09);color:#FFF6EC;font-size:16px;display:flex;align-items:center;justify-content:center}
.cm-ask button.listening{background:#F4530A;border-color:#F4530A}
@media (prefers-reduced-motion: reduce){.cm-buddy .cmb-line.fresh{animation:none}}

/* ===== v51: Photoroom-grade declutter pass ===== */
/* Me: grouped list sections */
.me-group h2 { margin-bottom: 4px; }
.me-group .me-row { border-top: 1px solid #F1E9DE; padding: 12px 0; margin: 0; }
.me-group .me-row:first-of-type { border-top: 0; }
.me-row-col { display: block; }
.me-row-col .chips { padding-top: 8px; }
.chips-inline { margin: 0; padding: 0; overflow: visible; }
.me-links { padding-top: 8px; padding-bottom: 8px; }
.me-link { display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 13px 2px; font-size: 14px; font-weight: 700; color: var(--ink);
  border-top: 1px solid #F1E9DE; text-align: left; }
.me-link:first-of-type { border-top: 0; }
.me-link i { font-style: normal; color: #C9BEB2; font-size: 17px; }
.me-links .ver { padding: 12px 2px 4px; }

/* Cart: one primary action + quiet links */
.cart-from { font-size: 12.5px; color: var(--ink2); font-weight: 600; margin: 12px 2px 0; }
.cart-from .from-chip { background: var(--green-soft); color: var(--green); }
.cart-links { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.cart-link { font-size: 13px; font-weight: 700; color: var(--ink2); padding: 8px 6px; }
.cart-dot { width: 3px; height: 3px; border-radius: 50%; background: #D5C9BC; }

/* Cook chat: full-height conversation, welcome state */
.chat-hello { display: block; font-size: 15px; font-weight: 800; margin-bottom: 2px; }

/* Compare: calm plan cards, best = accent ring (no overhang tag) */
.plan-card.best { box-shadow: var(--shadow), inset 0 0 0 1.5px var(--accent); }
.best-tag { position: static; display: inline-block; margin-bottom: 6px; font-size: 10px; font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase; color: var(--accent); background: var(--accent-soft);
  padding: 3px 8px; border-radius: 8px; box-shadow: none; }
.plat-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }

/* Recipe detail: pairing subline spacing (was inline style) */
.pair-sub { margin: -4px 0 8px; }

/* Home: more breathing room between shelves */
.row-sec { margin-bottom: 28px; }
.hero-sec { margin-bottom: 26px; }
.home-actions { margin-bottom: 24px; }

/* v51: sheet form atoms (profile editor + friends) */
.sheet-title { font-size: 18px; font-weight: 800; margin: 4px 2px 10px; }
.sheet-label { display: block; font-size: 12px; font-weight: 700; color: var(--ink2); margin: 10px 2px 5px; }
.sheet-input { width: 100%; background: var(--card); border: 1.5px solid #EADFD3; border-radius: 13px; padding: 12px 13px; font-size: 15px; font-weight: 600; color: var(--ink); }
.sheet-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* v51.1: recipe detail - sticky bar is ONE action; share lives in the actions row */
.rf-sticky #sticky-cart { display: none; }
.rf-sticky .primary { flex: 1; }
.rf-sticky .btn { min-height: 52px; }
.rf-cta .primary { flex: 1.6; }
.rf-actions { margin-top: 14px; }
.rf-actions .btn { min-height: 44px; font-size: 13.5px; }
.rf-share { display: none; }