:root {
  --ink: #24342d;
  --muted: #6c7771;
  --paper: #f7f3eb;
  --card: #fffdf8;
  --green: #416b59;
  --green-dark: #2e5142;
  --sage: #dce7de;
  --sage-soft: #edf3ed;
  --peach: #f2d3ba;
  --peach-soft: #fbefe4;
  --line: #e5e2da;
  --red: #ad5b4b;
  --shadow: 0 15px 45px rgba(44, 64, 54, .09);
  --radius: 22px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: #e8e5dd; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button { color: inherit; }

.app-shell { min-height: 100dvh; max-width: 520px; margin: 0 auto; background: var(--paper); position: relative; padding-bottom: 92px; }
.topbar { height: 72px; padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 20; background: rgba(247,243,235,.9); backdrop-filter: blur(18px); }
.brand { border: 0; background: none; display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 18px; cursor: pointer; }
.brand-mark, .auth-logo { display: grid; place-items: center; color: white; background: var(--green); font-family: Fraunces, serif; border-radius: 11px 11px 11px 4px; }
.brand-mark { width: 34px; height: 34px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.lang-pill, .avatar { border: 1px solid var(--line); background: var(--card); font-size: 12px; font-weight: 700; cursor: pointer; }
.lang-pill { border-radius: 999px; height: 34px; padding: 0 12px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--peach); }

.page { display: none; padding: 12px 18px 28px; animation: appear .28s ease; }
.page.active { display: block; }
@keyframes appear { from { opacity: 0; transform: translateY(5px); } }
.hero { padding: 8px 2px 20px; }
.eyebrow { margin: 0 0 7px; color: var(--green); font-size: 11px; letter-spacing: .13em; font-weight: 700; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 8px; font: 600 clamp(29px, 8vw, 38px)/1.08 Fraunces, serif; letter-spacing: -.02em; }
h2 { font-size: 20px; margin-bottom: 12px; }
h3 { font-size: 16px; margin-bottom: 6px; }
.muted { color: var(--muted); line-height: 1.55; }
.tiny { font-size: 12px; line-height: 1.45; color: var(--muted); }
.section-title { display: flex; align-items: flex-end; justify-content: space-between; margin: 24px 2px 12px; }
.section-title h2 { margin: 0; }
.section-title span, .section-title button { font-size: 13px; color: var(--green); }

.card { background: var(--card); border: 1px solid rgba(219,216,208,.75); border-radius: var(--radius); padding: 18px; box-shadow: 0 4px 18px rgba(44,64,54,.035); }
.card + .card { margin-top: 12px; }
.accent-card { background: linear-gradient(140deg, #dfeadf 0%, #f1eee4 100%); border: 0; }
.checkin-card { background: #fffdf8; border-color: #d9e3db; margin-bottom: 12px; }
.compact { padding: 8px 12px; font-size: 12px; }
.checkin-summary { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 13px; }
.checkin-summary span { padding: 7px 9px; border-radius: 10px; background: var(--sage-soft); color: var(--green-dark); font-size: 11px; font-weight: 600; }
.plan-card { overflow: hidden; }
.plan-route { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 17px 0; }
.plan-route div { min-width: 0; padding: 11px 9px; border-radius: 13px; background: rgba(255,253,248,.7); }
.plan-route span, .plan-route small { display: block; color: var(--muted); font-size: 10px; }
.plan-route strong { display: block; overflow: hidden; margin: 4px 0; font-size: 12px; line-height: 1.25; text-overflow: ellipsis; }
.peach-card { background: var(--peach-soft); border-color: #f1dfd0; }
.dark-card { color: white; background: var(--green-dark); border: 0; }
.dark-card .muted, .dark-card .tiny { color: rgba(255,255,255,.7); }
.row { display: flex; align-items: center; gap: 12px; }
.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.badge { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; background: var(--sage-soft); color: var(--green-dark); font-size: 11px; font-weight: 700; }
.badge.peach { background: var(--peach); color: #684636; }
.badge.dark { background: rgba(255,255,255,.15); color: #fff; }
.icon-box { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 15px; display: grid; place-items: center; background: var(--sage); font-size: 21px; }
.icon-box.peach { background: var(--peach); }
.meta { display: flex; gap: 14px; color: var(--muted); font-size: 12px; margin-top: 10px; flex-wrap: wrap; }
.progress { height: 8px; border-radius: 999px; background: rgba(65,107,89,.12); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--green); transition: width .3s; }

.energy-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; background: #eae7df; padding: 4px; border-radius: 15px; margin-top: 15px; }
.energy-switch button { border: 0; background: transparent; border-radius: 11px; padding: 10px; font-weight: 600; font-size: 13px; cursor: pointer; }
.energy-switch button.active { background: var(--card); box-shadow: 0 2px 8px rgba(42,58,50,.1); }
.primary, .secondary, .text-button, .icon-button { border: 0; cursor: pointer; }
.primary { padding: 12px 17px; color: white; background: var(--green); border-radius: 14px; font-weight: 700; }
.primary:hover { background: var(--green-dark); }
.secondary { padding: 11px 16px; color: var(--green-dark); background: var(--sage-soft); border: 1px solid #d8e4d9; border-radius: 14px; font-weight: 700; }
.text-button { padding: 7px 0; background: transparent; color: var(--green); font-weight: 700; }
.icon-button { width: 40px; height: 40px; border-radius: 13px; background: var(--sage-soft); font-size: 18px; }
.full { width: 100%; }

.task-line { display: flex; align-items: flex-start; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.task-line:last-child { border-bottom: 0; padding-bottom: 0; }
.check { width: 24px; height: 24px; flex: 0 0 24px; border: 2px solid #aab6ae; border-radius: 8px; background: transparent; cursor: pointer; display: grid; place-items: center; }
.check.done { border-color: var(--green); background: var(--green); color: white; }
.task-line.done h3, .shopping-item.done .item-name { text-decoration: line-through; color: #8e9792; }
.task-guide-link { padding: 4px 0 0; font-size: 11px; }
.assignee { width: 25px; height: 25px; border-radius: 50%; background: var(--peach); display: grid; place-items: center; font-size: 10px; font-weight: 700; }

.checkin-form { padding-bottom: 8px; }
.field-label { display: block; margin: 22px 0 9px; color: var(--ink); font-size: 13px; font-weight: 700; }
.large-input { width: 100%; padding: 15px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: white; font-size: 18px; font-weight: 700; }
.choice-grid { display: grid; gap: 7px; }
.choice-grid.three { grid-template-columns: repeat(3,1fr); }
.choice-grid.four { grid-template-columns: repeat(4,1fr); }
.choice-grid label { cursor: pointer; }
.choice-grid input { position: absolute; opacity: 0; pointer-events: none; }
.choice-grid span { min-height: 69px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid var(--line); border-radius: 14px; background: white; text-align: center; }
.choice-grid input:checked + span { border-color: var(--green); background: var(--sage); box-shadow: inset 0 0 0 1px var(--green); }
.choice-grid strong { display: block; font-size: 12px; }
.choice-grid small { color: var(--muted); font-size: 9px; }
.life-mode-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.life-mode-grid label { cursor: pointer; }
.life-mode-grid input { position: absolute; opacity: 0; pointer-events: none; }
.life-mode-grid span { min-height: 82px; padding: 11px; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto 1fr; gap: 2px 8px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.life-mode-grid b { grid-row: 1 / 3; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: var(--green); background: var(--sage-soft); }
.life-mode-grid strong { font-size: 11px; }
.life-mode-grid small { color: var(--muted); font-size: 8px; line-height: 1.35; }
.life-mode-grid input:checked + span { border-color: var(--green); background: var(--sage-soft); box-shadow: inset 0 0 0 1px var(--green); }
.sticky-submit { margin-top: 24px; }

.timer-panel { margin: 20px 0; padding: 15px; display: flex; align-items: center; justify-content: space-between; border-radius: 18px; color: white; background: var(--green-dark); }
.timer-panel div { display: flex; flex-direction: column; }
.timer-value { font: 600 30px/1 Fraunces,serif; letter-spacing: .03em; }
.timer-panel small { margin-top: 5px; color: rgba(255,255,255,.65); }
.timer-panel .primary { color: var(--green-dark); background: var(--card); }
.timer-panel .primary:disabled { opacity: .7; }
.guide-steps { display: grid; gap: 9px; margin: 17px 0 22px; }
.guide-step { width: 100%; padding: 13px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: white; text-align: left; cursor: pointer; }
.guide-step span { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 9px; color: var(--green-dark); background: var(--sage); font-size: 12px; font-weight: 700; }
.guide-step strong { font-size: 13px; line-height: 1.35; }
.guide-step.done { opacity: .65; background: var(--sage-soft); }
.guide-step.done strong { text-decoration: line-through; }
.guide-steps.static .guide-step { cursor: default; }
.ingredient-list { display: flex; gap: 7px; flex-wrap: wrap; }
.ingredient-list span { padding: 8px 10px; border-radius: 11px; background: var(--sage-soft); font-size: 11px; }
.recipe-precision { margin: 15px 0; padding: 13px; display: flex; gap: 11px; align-items: center; border-radius: 17px; color: white; background: var(--green-dark); }
.recipe-precision > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,255,255,.13); }
.recipe-precision strong, .recipe-precision small { display: block; }
.recipe-precision small { margin-top: 4px; color: rgba(255,255,255,.66); font-size: 9px; line-height: 1.4; }
.precision-list { display: grid; gap: 7px; }
.precision-list > div { padding: 9px 11px; display: flex; gap: 10px; align-items: center; border-radius: 13px; background: var(--sage-soft); }
.precision-list span { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; border-radius: 8px; color: white; background: var(--green); font-size: 9px; font-weight: 800; }
.precision-list p { margin: 0; font-size: 10px; line-height: 1.4; }
.heat-card { margin: 10px 0; padding: 12px; display: flex; gap: 11px; border: 1px solid #e8c8aa; border-radius: 15px; background: var(--peach-soft); }
.heat-card > span { font-size: 22px; }
.heat-card p { margin: 3px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.precision-details { margin: 8px 0; border: 1px solid var(--line); border-radius: 14px; background: white; overflow: hidden; }
.precision-details summary { padding: 12px; color: var(--green-dark); font-size: 11px; font-weight: 800; cursor: pointer; }
.precision-details div { padding: 0 12px 10px; }
.precision-details p { margin: 6px 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.source-link { margin: 10px 0 16px; display: block; color: var(--green); font-size: 9px; line-height: 1.4; }
.detail-tabs { position: sticky; z-index: 3; top: -10px; margin: 16px 0; padding: 4px; display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; border-radius: 15px; background: #eceee8; }
.detail-tabs button { padding: 9px 5px; border: 0; border-radius: 11px; color: var(--muted); background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }
.detail-tabs button.active { color: white; background: var(--green); box-shadow: 0 3px 9px rgba(46,81,66,.2); }
.detail-panel { animation: panel-in .2s ease; }
@keyframes panel-in { from { opacity:.5; transform:translateY(4px); } }
.recipe-hero-summary { min-height: 108px; margin: 8px 0 12px; padding: 17px; display: flex; gap: 14px; align-items: center; border-radius: 22px; background: linear-gradient(145deg,var(--sage),var(--peach-soft)); }
.recipe-symbol { width: 58px; height: 58px; flex: 0 0 58px; display: grid; place-items: center; border-radius: 20px 20px 20px 7px; color: white; background: var(--green); font-size: 25px; }
.recipe-hero-summary strong, .recipe-hero-summary small { display:block; }
.recipe-hero-summary small { margin-top:5px; color:var(--muted); font-size:9px; line-height:1.4; }
.recipe-facts, .clean-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:10px 0; }
.recipe-facts div, .clean-facts div { min-height:61px; padding:9px 5px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:14px; background:white; text-align:center; }
.recipe-facts b, .recipe-facts small, .clean-facts b, .clean-facts small { display:block; }
.recipe-facts b, .clean-facts b { color:var(--green-dark); font-size:13px; }
.recipe-facts small, .clean-facts small { margin-top:3px; color:var(--muted); font-size:8px; }
.lunch-callout { margin:9px 0 16px; padding:12px; display:flex; gap:10px; align-items:center; border-radius:15px; background:var(--peach-soft); }
.lunch-callout > span { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background:var(--peach); }
.lunch-callout strong, .lunch-callout small { display:block; }
.lunch-callout small { margin-top:3px; color:var(--muted); font-size:9px; line-height:1.4; }
.ingredient-checklist { display:grid; gap:7px; margin-bottom:16px; }
.ingredient-checklist label { padding:11px; display:flex; gap:10px; align-items:center; border:1px solid var(--line); border-radius:13px; background:white; cursor:pointer; }
.ingredient-checklist input { position:absolute; opacity:0; }
.ingredient-checklist span { width:24px; height:24px; flex:0 0 24px; display:grid; place-items:center; border-radius:8px; color:transparent; border:1px solid var(--line); }
.ingredient-checklist strong { font-size:10px; line-height:1.35; }
.ingredient-checklist input:checked + span { color:white; border-color:var(--green); background:var(--green); }
.ingredient-checklist input:checked ~ strong { color:var(--muted); text-decoration:line-through; }
.mini-heading { margin:17px 0 8px; color:var(--green); font-size:9px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.mode-empty { padding: 22px 12px; text-align: center; }
.mode-empty > span { width: 48px; height: 48px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 16px; color: white; background: var(--green); font-size: 21px; }
.mode-empty p { color: var(--muted); font-size: 10px; line-height: 1.5; }

.together-strip { margin: 12px 0; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,253,248,.68); }
.together-strip > div { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center; }
.together-strip strong, .together-strip small { grid-column: 2; }
.together-strip small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.couple-avatars { grid-row: 1 / 3; display: flex; }
.couple-avatars b { width: 27px; height: 27px; display: grid; place-items: center; border: 2px solid var(--card); border-radius: 50%; color: white; background: var(--green); font-size: 10px; }
.couple-avatars b + b { margin-left: -8px; color: var(--ink); background: var(--peach); }

.helper-time-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 22px 0; }
.helper-time { padding: 12px 5px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 15px; background: white; cursor: pointer; }
.helper-time strong { font-size: 19px; }
.helper-time small { color: var(--muted); font-size: 10px; }
.helper-time.active { color: white; border-color: var(--green); background: var(--green); }
.helper-time.active small { color: rgba(255,255,255,.72); }
.helper-suggestion { padding: 24px 20px 20px; border-radius: 24px; background: linear-gradient(150deg,#dce9de,#fbefe4); text-align: center; }
.helper-kicker { color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.helper-icon { width: 58px; height: 58px; margin: 16px auto; display: grid; place-items: center; border-radius: 20px 20px 20px 7px; color: white; background: var(--green); font-size: 24px; box-shadow: 0 10px 25px rgba(46,81,66,.2); }
.helper-suggestion h2 { margin-bottom: 6px; font: 600 27px/1.1 Fraunces,serif; }
.helper-suggestion p { color: var(--muted); font-size: 13px; line-height: 1.45; }
.helper-suggestion .meta { justify-content: center; margin: 14px 0 18px; }

.assignment-grid { display: grid; gap: 10px; margin-top: 24px; }
.assignment-option { padding: 14px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 17px; background: white; cursor: pointer; text-align: left; }
.assignment-option span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--peach); font-size: 11px; font-weight: 800; }
.assignment-option.active { border-color: var(--green); background: var(--sage-soft); box-shadow: inset 0 0 0 1px var(--green); }
.work-options { display: grid; gap: 8px; }
.work-option { padding: 12px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 15px; background: white; cursor: pointer; text-align: left; }
.work-option > span { width: 48px; flex: 0 0 48px; color: var(--green); font-weight: 800; }
.work-option strong, .work-option small { display: block; }
.work-option small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.work-option.active { border-color: var(--green); background: var(--sage-soft); }
.defer-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.defer-grid button { padding: 10px 5px; font-size: 11px; }
.defer-note { margin: 12px 0 0; text-align: center; }

.reminder-status { margin: 18px 0; padding: 14px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 17px; background: white; }
.reminder-status > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); background: #eee; font-weight: 800; }
.reminder-status.active > span { color: white; background: var(--green); }
.reminder-status strong, .reminder-status small { display: block; }
.reminder-status small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.toggle-row { margin: 18px 0; padding: 13px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 15px; cursor: pointer; }
.toggle-row > input { position: absolute; opacity: 0; }
.toggle-row > span { width: 42px; height: 24px; flex: 0 0 42px; padding: 3px; border-radius: 99px; background: #ccd1cd; transition: .2s; }
.toggle-row > span::after { content:""; width: 18px; height: 18px; display: block; border-radius: 50%; background: white; transition: .2s; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.toggle-row > input:checked + span { background: var(--green); }
.toggle-row > input:checked + span::after { transform: translateX(18px); }
.toggle-row strong, .toggle-row small { display: block; }
.toggle-row small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.reminder-limit { margin-top: 14px; padding: 10px; border-radius: 12px; background: var(--peach-soft); }
.reminder-summary { margin-top: 12px; }

.install-steps { display: grid; gap: 10px; margin: 22px 0; }
.install-steps div { padding: 13px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 15px; }
.install-steps span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: white; background: var(--green); font-size: 12px; font-weight: 800; }

.room-foundation { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.room-chip { min-height: 105px; padding: 12px 9px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: var(--card); text-align: left; cursor: pointer; }
.room-chip > span { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 11px; background: var(--sage-soft); }
.room-chip strong { font-size: 11px; line-height: 1.2; }
.room-chip small { color: var(--muted); font-size: 9px; }
.room-chip.today { border-color: #e2b38f; background: var(--peach-soft); }
.room-chip.today > span { background: var(--peach); }
.room-chip.soon { background: #f5f4ec; }
.content-foundation { margin-top: 12px; }
.content-targets { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 14px 0; }
.content-targets div { padding: 11px 7px; border-radius: 14px; background: var(--sage-soft); text-align: center; }
.content-targets strong, .content-targets small { display: block; }
.content-targets strong { font: 600 24px Fraunces,serif; }
.content-targets small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.25; }
.cook-stats { margin: 15px 0 2px; }
.recipe-time { position: absolute; z-index: 2; top: 10px; left: 10px; padding: 6px 8px; border-radius: 999px; color: white; background: rgba(37,58,48,.82); font-size: 9px; font-weight: 800; }
.empty-recipe { grid-column: 1 / -1; }
.recipe-support-grid { display: grid; gap: 8px; margin: 16px 0; }
.support-card, .supply-card { padding: 12px; display: flex; gap: 11px; align-items: flex-start; border: 1px solid var(--line); border-radius: 15px; background: var(--sage-soft); }
.support-card > span, .supply-card > span { width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; border-radius: 10px; color: white; background: var(--green); }
.support-card strong, .support-card small, .supply-card strong, .supply-card small { display: block; }
.support-card small, .supply-card small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.45; }

.cleaning-levels { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 19px 0; }
.cleaning-level { padding: 12px 5px; display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: white; cursor: pointer; }
.cleaning-level small { color: var(--muted); font-size: 9px; }
.cleaning-level.active { color: white; border-color: var(--green); background: var(--green); }
.cleaning-level.active small { color: rgba(255,255,255,.7); }
.clean-task-list { display: grid; gap: 9px; }
.clean-task-card { width: 100%; padding: 13px; display: grid; grid-template-columns: 39px 1fr auto; gap: 11px; align-items: center; border: 1px solid var(--line); border-radius: 17px; color: var(--ink); background: white; text-align: left; cursor: pointer; }
.clean-task-card div > * { display: block; }
.clean-task-card small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.clean-task-card em { margin-top: 6px; color: var(--green); font-size: 9px; font-style: normal; }
.clean-task-card b { color: var(--green); }
.clean-task-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 13px; background: var(--sage-soft); }
.back-link { margin-bottom: 12px; }
.clean-visual { min-height: 112px; margin: 14px 0; padding: 18px; display: flex; align-items: center; gap: 16px; border-radius: 22px; background: linear-gradient(145deg,var(--sage),var(--peach-soft)); }
.clean-visual > span { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 21px 21px 21px 7px; color: white; background: var(--green); font-size: 27px; }
.clean-visual strong, .clean-visual small { display: block; }
.clean-visual small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.safety-note { margin: 9px 0; padding: 12px 14px; border-left: 3px solid #d49864; border-radius: 5px 14px 14px 5px; background: var(--peach-soft); }
.safety-note strong { color: #8b542d; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.safety-note p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.product-manual { margin: 9px 0; padding: 14px; border: 1px solid var(--line); border-radius: 17px; background: white; }
.product-manual > div { margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.product-manual small, .product-manual strong { display: block; }
.product-manual small { color: var(--green); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.product-manual strong { margin-top: 3px; }
.product-manual p { margin: 7px 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.product-manual b { color: var(--ink); }
.product-manual a { color: var(--green); font-size: 9px; font-weight: 700; }
.compact-manual { padding:0; overflow:hidden; }
.compact-manual summary, .safety-note summary { padding:12px 14px; color:var(--green-dark); font-size:10px; font-weight:800; cursor:pointer; }
.compact-manual .manual-body { margin:0; padding:0 14px 13px; border:0; }
.safety-note { display:block; }
.safety-note p + p { margin-top:6px; }
.focus-step { width:100%; min-height:91px; padding:15px; display:grid; grid-template-columns:38px 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center; border:0; border-radius:20px; color:white; background:var(--green); text-align:left; cursor:pointer; box-shadow:0 10px 25px rgba(46,81,66,.2); }
.focus-step > span { grid-row:1 / 3; width:38px; height:38px; display:grid; place-items:center; border-radius:13px; color:var(--green-dark); background:white; font-weight:800; }
.focus-step strong { align-self:end; font-size:13px; line-height:1.35; }
.focus-step small { align-self:start; margin-top:4px; color:rgba(255,255,255,.68); font-size:8px; }
.focus-step.done { background:#82948a; }
.clean-overview p { display:flex; gap:9px; align-items:flex-start; }
.clean-overview p b { width:20px; height:20px; flex:0 0 20px; display:grid; place-items:center; border-radius:7px; color:var(--green); background:var(--sage-soft); font-size:8px; }
.clean-overview p.done { text-decoration:line-through; opacity:.6; }

.couple-board { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 12px 0; }
.person-card { padding: 13px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 17px; background: var(--card); }
.person-card strong, .person-card small { display: block; }
.person-card small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.person-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font-size: 11px; font-weight: 800; }
.person-avatar.enti { color: var(--ink); background: var(--peach); }
.helper-card { margin-top: 12px; }
.work-summary { margin-top: 12px; }

.completion-pop { position: fixed; z-index: 120; left: 50%; bottom: 94px; width: min(370px,calc(100% - 28px)); padding: 22px; display: grid; justify-items: center; border: 1px solid rgba(255,255,255,.8); border-radius: 25px; background: rgba(255,253,248,.97); box-shadow: 0 22px 65px rgba(36,52,45,.24); text-align: center; opacity: 0; transform: translate(-50%,30px) scale(.94); transition: .32s cubic-bezier(.2,.8,.2,1); }
.completion-pop.show { opacity: 1; transform: translate(-50%,0) scale(1); }
.completion-pop > span { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font-size: 24px; animation: completion-bloom .55s ease; }
.completion-pop strong { margin-top: 12px; font: 600 22px Fraunces,serif; }
.completion-pop small { margin-top: 5px; color: var(--muted); line-height: 1.4; }
.completion-pop button { margin-top: 14px; padding: 9px 14px; border: 0; border-radius: 12px; color: var(--green-dark); background: var(--sage-soft); font-weight: 700; cursor: pointer; }
.completion-spark { position: absolute; inset: 7px 15px auto; display: flex; justify-content: space-between; color: #d59e68; }
.completion-spark i { font-style: normal; animation: sparkle 1s ease infinite alternate; }
.completion-spark i:nth-child(2) { animation-delay: .2s; }
@keyframes completion-bloom { 0% { transform: scale(.4) rotate(-20deg); } 70% { transform: scale(1.12) rotate(3deg); } }
@keyframes sparkle { from { opacity: .35; transform: translateY(3px) scale(.8); } to { opacity: 1; transform: translateY(-3px) scale(1.15); } }

.meal-visual { height: 170px; margin: -18px -18px 16px; border-radius: var(--radius) var(--radius) 0 0; position: relative; overflow: hidden; background: linear-gradient(135deg, #d88968, #f2c78e); }
.meal-visual::before, .meal-visual::after { content: ""; position: absolute; border-radius: 50%; }
.meal-visual::before { width: 210px; height: 210px; background: #f7ead5; right: -24px; top: 25px; box-shadow: inset 0 0 0 18px rgba(255,255,255,.45); }
.meal-visual::after { width: 126px; height: 38px; background: repeating-linear-gradient(8deg,#d69b4e 0 5px,#f0c66e 5px 10px); right: 18px; top: 91px; transform: rotate(-7deg); box-shadow: 0 8px 20px rgba(79,48,22,.15); }
.meal-visual.indian { background: linear-gradient(135deg,#9c4e37,#e3a94c); }
.meal-visual.balkan { background: linear-gradient(135deg,#7a9c72,#e4c48c); }
.meal-visual.quick { background: linear-gradient(135deg,#799886,#e1c9ad); }
.meal-label { position: absolute; left: 14px; top: 14px; z-index: 2; }

.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 16px; }
.day-pill { border: 0; background: transparent; padding: 8px 2px; border-radius: 13px; color: var(--muted); font-size: 10px; cursor: pointer; }
.day-pill strong { display: block; font-size: 13px; color: var(--ink); margin-top: 5px; }
.day-pill.active { color: white; background: var(--green); }
.day-pill.active strong { color: white; }
.timeline { position: relative; padding-left: 23px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.timeline-item { position: relative; padding: 0 0 20px; }
.timeline-item::before { content: ""; position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--green); left: -22px; top: 5px; box-shadow: 0 0 0 4px var(--paper); }
.timeline-item p { margin: 3px 0; }

.filter-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; }
.filter-chip { white-space: nowrap; border: 1px solid var(--line); background: var(--card); padding: 9px 13px; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 600; }
.filter-chip.active { color: white; border-color: var(--green); background: var(--green); }
.recipe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.recipe-card { border: 1px solid var(--line); background: var(--card); padding: 0; border-radius: 18px; overflow: hidden; text-align: left; cursor: pointer; }
.recipe-art { height: 95px; background: linear-gradient(140deg,var(--peach),#d69f71); position: relative; }
.recipe-art::after { content: ""; width: 74px; height: 74px; border-radius: 50%; background: rgba(255,253,248,.77); position: absolute; right: 14px; top: 12px; box-shadow: inset 0 0 0 7px rgba(255,255,255,.45); }
.recipe-card:nth-child(2n) .recipe-art { background: linear-gradient(140deg,#98b19e,#d9c797); }
.recipe-copy { padding: 12px; }
.recipe-copy h3 { min-height: 39px; }

.shopping-item { display: flex; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.shopping-item:last-child { border: 0; }
.item-name { flex: 1; }
.item-name small { display: block; color: var(--muted); margin-top: 2px; }
.price { font-size: 12px; color: var(--muted); }
.add-row { display: flex; gap: 8px; margin-top: 12px; }
.add-row input { flex: 1; min-width: 0; border: 1px solid var(--line); background: white; padding: 12px 13px; border-radius: 13px; outline: none; }
.budget-number { font: 600 32px Fraunces, serif; }

.bottom-nav { position: fixed; z-index: 25; bottom: 0; left: 50%; transform: translateX(-50%); width: min(520px, 100%); height: 78px; padding: 8px 12px max(8px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5,1fr); background: rgba(255,253,248,.95); border-top: 1px solid var(--line); backdrop-filter: blur(20px); }
.nav-item { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #879089; font-size: 10px; cursor: pointer; }
.nav-item.active { color: var(--green); font-weight: 700; }
.nav-icon { font-size: 19px; line-height: 1; }
.cook-nav .nav-icon { width: 39px; height: 39px; margin-top: -18px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); box-shadow: 0 7px 18px rgba(46,81,66,.25); border: 4px solid var(--card); }

.sheet-backdrop { position: fixed; inset: 0; z-index: 39; background: rgba(26,38,32,.32); backdrop-filter: blur(2px); }
.side-sheet { position: fixed; z-index: 40; left: 50%; bottom: 0; width: min(520px,100%); max-height: 88dvh; overflow: auto; padding: 10px 22px 32px; background: var(--card); border-radius: 26px 26px 0 0; transform: translate(-50%,105%); transition: transform .3s ease; box-shadow: var(--shadow); }
.side-sheet.open { transform: translate(-50%,0); }
.sheet-handle { width: 44px; height: 4px; background: #d4d4cf; border-radius: 99px; margin: 0 auto 22px; }
.settings-row { padding: 14px 0; border-bottom: 1px solid var(--line); }
.settings-row label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.settings-row input, .settings-row select { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 11px; background: white; }

.auth-overlay { position: fixed; inset: 0; z-index: 80; background: linear-gradient(155deg,#e8eee5,#f8eee3 70%); display: grid; place-items: center; padding: 20px; }
.auth-pending { overflow: hidden; }
.auth-pending .app-shell { visibility: hidden; pointer-events: none; }
.auth-card { width: min(390px,100%); background: rgba(255,253,248,.92); padding: 28px; border: 1px solid rgba(255,255,255,.8); border-radius: 28px; box-shadow: var(--shadow); }
.auth-card h1 { font-size: 31px; }
.auth-logo { width: 52px; height: 52px; font-size: 25px; margin-bottom: 20px; }
.auth-card label { display: block; font-size: 12px; font-weight: 700; margin: 13px 0; }
.auth-card input { width: 100%; margin-top: 6px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: white; outline: none; }
.auth-card input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--sage); }
.divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--muted); font-size: 11px; }
.divider::before, .divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 92px; transform: translate(-50%,20px); width: max-content; max-width: calc(100% - 36px); padding: 11px 15px; color: white; background: #263a30; border-radius: 12px; font-size: 13px; opacity: 0; pointer-events: none; transition: .25s; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%,0); }

@media (min-width: 800px) {
  body { padding: 24px 0; }
  .app-shell { min-height: calc(100dvh - 48px); border-radius: 30px; overflow: hidden; box-shadow: 0 25px 80px rgba(40,50,44,.15); }
  .bottom-nav { bottom: 24px; border-radius: 0 0 30px 30px; }
  .side-sheet { bottom: 24px; }
}