:root {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #20302a;
  background: #f7f3eb;
  font-synthesis: none;
  --ink: #20302a;
  --ink-2: #31423b;
  --muted: #778079;
  --paper: #fffdf8;
  --line: #e6dfd4;
  --shadow: 0 12px 30px rgba(44, 48, 42, .07);
  --green: #446f5b;
  --green-soft: #e3eee8;
  --orange: #dd7b50;
  --orange-soft: #fae6dc;
  --blue: #5f7ea3;
  --blue-soft: #e7edf5;
  --rose: #a85f75;
  --rose-soft: #f3e5ea;
  --gold: #b5892f;
  --gold-soft: #f4ecd4;
  --plum: #7e6786;
  --plum-soft: #ece5ef;
  --mint: #4f8a7a;
  --mint-soft: #e2f0eb;
}
* { box-sizing: border-box; }
html { background: #f7f3eb; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% -10%, rgba(221,123,80,.11), transparent 34%),
    radial-gradient(circle at 100% 5%, rgba(68,111,91,.10), transparent 30%),
    #f7f3eb;
  color: var(--ink);
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; color: inherit; }
button:disabled { cursor: default; }
.app-shell { min-height: 100vh; padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(18px);
  background: rgba(247,243,235,.88);
  border-bottom: 1px solid rgba(32,48,42,.06);
}
.topbar-inner {
  max-width: 980px;
  margin: auto;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px 12px;
}
.brand-mark, .install-icon, .big-install-icon {
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #315c4f, #203b33);
  color: white;
  font-family: Georgia, serif;
  box-shadow: 0 10px 24px rgba(49,92,79,.18);
}
.brand-mark { width: 42px; height: 42px; border-radius: 14px; font-size: 24px; flex: 0 0 auto; }
.title-block { min-width: 0; }
.top-actions { margin-left: auto; display: flex; gap: 8px; }
.round-action {
  width: 40px; height: 40px; border-radius: 13px;
  border: 1px solid var(--line); background: rgba(255,253,248,.8);
  font-size: 22px; font-weight: 700;
}
h1,h2,h3,p { margin-top: 0; }
h1 { margin: 0; font-size: 25px; line-height: 1.05; letter-spacing: -.035em; }
h2 { margin-bottom: 10px; font-size: clamp(26px, 7vw, 36px); line-height: 1.08; letter-spacing: -.045em; }
h3 { letter-spacing: -.025em; }
.eyebrow {
  display: block; text-transform: uppercase; letter-spacing: .13em;
  font-size: 10px; color: var(--muted); font-weight: 850; margin-bottom: 4px;
}
main { max-width: 980px; margin: auto; padding: 18px 14px 44px; }
.stack { display: grid; gap: 14px; }
.section-head, .row-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.section-head h2 { margin-bottom: 0; }
.muted { color: var(--muted); line-height: 1.55; }

.primary, .ghost, .icon-btn, .close, .replace-icon, .dismiss {
  border: 0;
}
.primary {
  background: linear-gradient(145deg, #315c4f, #203b33);
  color: white; border-radius: 15px; padding: 13px 16px;
  font-weight: 800; box-shadow: 0 9px 20px rgba(49,92,79,.16);
}
.primary.compact { padding: 11px 14px; white-space: nowrap; box-shadow: none; }
.primary.wide { width: 100%; margin-top: 8px; }
.primary:disabled { opacity: .45; box-shadow: none; }
.ghost {
  background: #efebe3; color: var(--ink);
  padding: 10px 12px; border-radius: 12px; font-weight: 750;
}
.ghost.small { font-size: 12px; padding: 8px 10px; }
.ghost:disabled { opacity: .4; }

.welcome-card {
  position: relative; overflow: hidden;
  min-height: 330px; padding: 28px 24px;
  border-radius: 30px;
  background: linear-gradient(145deg, #2e5d4f 0%, #486f5e 63%, #6a8e7b 100%);
  color: #fff;
  box-shadow: 0 18px 42px rgba(41,78,66,.20);
}
.welcome-copy { position: relative; z-index: 2; max-width: 520px; }
.welcome-card h2 { font-size: clamp(34px, 10vw, 52px); max-width: 450px; margin: 15px 0 14px; }
.welcome-card p { color: rgba(255,255,255,.82); max-width: 500px; line-height: 1.6; margin-bottom: 24px; }
.welcome-card .primary { background: white; color: #315c4f; box-shadow: none; }
.soft-kicker {
  display: inline-flex; border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10); border-radius: 99px;
  padding: 7px 10px; font-size: 11px; font-weight: 800;
}
.food-illustration { position: absolute; width: 220px; height: 220px; right: -45px; bottom: -58px; opacity: .85; }
.plate { position: absolute; inset: 20px; border-radius: 50%; background: #f5e8d8; box-shadow: inset 0 0 0 24px rgba(255,255,255,.35), 0 14px 40px rgba(0,0,0,.08); }
.leaf { position: absolute; width: 50px; height: 28px; border-radius: 100% 0 100% 0; background: #b8d09b; transform: rotate(28deg); }
.leaf-one { left: 75px; top: 83px; }
.leaf-two { left: 110px; top: 110px; transform: rotate(-28deg); background:#7ea56f; }
.dot { position: absolute; border-radius: 50%; background: #de835c; }
.dot-one { width: 34px; height: 34px; left: 110px; top: 70px; }
.dot-two { width: 25px; height: 25px; left: 75px; top: 120px; background:#e3b14d; }

.install-card {
  position: relative;
  display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center;
  padding: 14px 42px 14px 14px;
  border: 1px solid #d8e2dc; border-radius: 20px;
  background: #f8fcf9; box-shadow: var(--shadow);
}
.install-icon { width: 46px; height: 46px; border-radius: 14px; font-size: 24px; }
.install-card p { color: var(--muted); margin: 3px 0 0; font-size: 12px; line-height: 1.4; }
.dismiss { position: absolute; right: 9px; top: 8px; background: transparent; color: #94a09a; font-size: 20px; }

.category-overview { margin-top: 4px; }
.category-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.category-tile {
  border: 1px solid var(--line); border-radius: 20px; padding: 16px;
  background: var(--paper); text-align: left; display: grid; gap: 5px;
  box-shadow: 0 8px 22px rgba(44,48,42,.045);
  position: relative; overflow: hidden;
}
.category-tile::after { content:""; position:absolute; width:80px; height:80px; border-radius:50%; right:-30px; bottom:-36px; background: var(--tone-soft); }
.category-icon { width: 34px; height: 34px; display:grid; place-items:center; border-radius: 11px; background: var(--tone-soft); color: var(--tone); font-size: 19px; font-weight: 800; }
.category-tile strong { font-size: 14px; }
.category-tile small { color: var(--muted); }

.today-card {
  --tone: var(--green); --tone-soft: var(--green-soft);
  background: linear-gradient(155deg, var(--tone-soft), #fffdf8 65%);
  border: 1px solid color-mix(in srgb, var(--tone) 15%, var(--line));
  border-radius: 28px; overflow: hidden; box-shadow: var(--shadow);
}
.today-main { width:100%; border:0; background:transparent; text-align:left; padding: 22px 20px 18px; }
.today-topline { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom: 18px; }
.category-chip {
  display:inline-flex; align-items:center; gap:5px;
  background: rgba(255,255,255,.65); border: 1px solid rgba(0,0,0,.05);
  color: var(--tone); border-radius:99px; padding: 6px 9px;
  font-size: 11px; font-weight: 850;
}
.day-label { color: var(--tone); font-size: 12px; font-weight: 850; }
.today-card h3 { font-size: clamp(25px, 7vw, 34px); margin-bottom: 10px; max-width: 620px; }
.today-card p { color: #59635e; line-height:1.55; max-width:650px; }
.meal-footer {
  border-top: 1px solid rgba(32,48,42,.07); padding: 11px 14px 11px 18px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  color: #65706a; font-size: 11px; font-weight:700; background:rgba(255,255,255,.42);
}
.meal-actions { display:flex; gap:7px; align-items:center; }
.icon-btn { width:34px; height:34px; border-radius:11px; background:rgba(255,255,255,.75); color:#9a9f9b; }
.icon-btn.active { color:var(--tone); background:#fff; }
.mini-meals { display:grid; gap:9px; }
.mini-meal {
  --tone: var(--green); --tone-soft: var(--green-soft);
  background:var(--paper); border:1px solid var(--line); border-radius:19px;
  display:grid; grid-template-columns:1fr auto; align-items:center; overflow:hidden;
}
.mini-main { border:0; background:transparent; text-align:left; padding:13px; display:grid; grid-template-columns:44px 1fr; align-items:center; gap:11px; }
.mini-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:var(--tone-soft); color:var(--tone); font-size:21px; font-weight:900; }
.mini-day { color:var(--tone); font-weight:850; font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
.mini-main h3 { margin:3px 0 4px; font-size:15px; }
.mini-meta { color:var(--muted); font-size:11px; }
.mini-actions { display:flex; padding-right:9px; gap:2px; }
.replace-icon { width:34px; height:34px; background:transparent; font-size:19px; color:#778079; }
.replace-icon:disabled { opacity:.3; }

.macro-row { display:flex; gap:7px; flex-wrap:wrap; margin-top:14px; }
.macro {
  border-radius:99px; padding:7px 9px; font-size:11px; font-weight:800;
  background:#f0eee8; color:#5b625e;
}
.macro b { font-weight:650; opacity:.78; }
.macro.protein { background:#e7f0eb; color:#3f6857; }
.macro.kcal { background:#f5eadf; color:#9a6744; }
.macro.carbs { background:#ede9f5; color:#6e6087; }
.macro.fat { background:#f3e8e8; color:#8f5f60; }
.macro-row.compact { margin-top:12px; }
.macro-row.compact .macro { padding:5px 7px; font-size:10px; }

.generator-card {
  background:linear-gradient(150deg,#fffdf8,#f3eee3);
  border:1px solid var(--line); border-radius:28px; padding:25px 20px;
  box-shadow:var(--shadow);
}
.segmented { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:22px 0 16px; }
.segmented button {
  border:1px solid var(--line); background:#fffdf8; border-radius:16px; padding:14px 8px;
  display:grid; gap:2px; color:var(--muted);
}
.segmented button strong { color:var(--ink); font-size:22px; }
.segmented button span { font-size:10px; font-weight:750; }
.segmented button.active { background:var(--green); border-color:var(--green); color:white; }
.segmented button.active strong { color:white; }
.principles { display:grid; gap:9px; }
.principles > div { display:grid; grid-template-columns:38px 1fr; column-gap:10px; align-items:start; background:var(--paper); border:1px solid var(--line); padding:14px; border-radius:18px; }
.principles > div > span { grid-row:1/3; width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:#eef3ef; color:var(--green); font-weight:900; font-size:11px; }
.principles strong { font-size:13px; }
.principles p { margin:3px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }

.shopping-group, .empty-card {
  background:var(--paper); border:1px solid var(--line); border-radius:22px; box-shadow:0 8px 22px rgba(44,48,42,.04);
}
.shopping-group { padding:15px; }
.shopping-title { display:flex; gap:8px; align-items:center; margin-bottom:5px; }
.shopping-title h3 { margin:0; font-size:14px; }
.shopping-dot { width:9px; height:9px; border-radius:50%; background:#6f947f; }
.dot-1{background:#d38a5d}.dot-2{background:#7891ad}.dot-3{background:#b09b4d}.dot-4{background:#8a6d91}
.shopping-item { display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:10px; padding:12px 1px; border-top:1px solid #eee9e1; }
.shopping-item:first-of-type { border-top:0; }
.shopping-item.done { opacity:.43; text-decoration:line-through; }
.shopping-item input { width:20px; height:20px; accent-color:var(--green); }
.shopping-item span { font-size:13px; }
.shopping-item strong { font-size:12px; }
.empty-card { padding:28px 20px; text-align:center; }
.empty-card p { color:var(--muted); line-height:1.5; }
.empty-icon { width:52px;height:52px;margin:0 auto 14px;border-radius:17px;display:grid;place-items:center;background:var(--green-soft);color:var(--green);font-size:24px;font-weight:900; }

.recipe-toolbar { display:flex; gap:8px; }
.search-wrap { flex:1; position:relative; }
.search-wrap > span { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#8a928d; font-size:20px; }
.search-wrap input, .form-sheet input, .form-sheet textarea, .form-sheet select {
  width:100%; border:1px solid var(--line); background:var(--paper); border-radius:14px;
  padding:12px 13px; outline:none; color:var(--ink);
}
.search-wrap input { padding-left:38px; }
.search-wrap input:focus, .form-sheet input:focus, .form-sheet textarea:focus, .form-sheet select:focus { border-color:#91aa9e; box-shadow:0 0 0 3px rgba(68,111,91,.09); }
.filter-scroll { display:flex; gap:7px; overflow-x:auto; padding:2px 1px 4px; scrollbar-width:none; }
.filter-scroll::-webkit-scrollbar { display:none; }
.filter-chip {
  --tone:var(--green); --tone-soft:var(--green-soft);
  flex:0 0 auto; border:1px solid var(--line); background:var(--paper); border-radius:99px;
  padding:8px 10px; font-size:11px; font-weight:800; color:#65706a;
}
.filter-chip span { opacity:.65; margin-left:2px; }
.filter-chip.active { background:var(--tone-soft); color:var(--tone); border-color:color-mix(in srgb,var(--tone) 24%,var(--line)); }
.results-line { color:var(--muted); font-size:11px; font-weight:700; padding:0 2px; }
.recipe-grid { display:grid; gap:11px; }
.recipe-card {
  --tone:var(--green); --tone-soft:var(--green-soft);
  position:relative; background:var(--paper); border:1px solid var(--line); border-radius:22px; overflow:hidden;
  box-shadow:0 8px 22px rgba(44,48,42,.045);
}
.recipe-open { width:100%; border:0; background:transparent; text-align:left; display:grid; grid-template-columns:92px 1fr; padding:0; color:inherit; }
.recipe-art { position:relative; min-height:100%; background:linear-gradient(145deg,var(--tone-soft),color-mix(in srgb,var(--tone-soft) 60%, white)); display:grid; place-items:center; }
.recipe-art-icon { font-size:35px; color:var(--tone); font-weight:900; }
.recipe-art .category-chip { position:absolute; left:7px; bottom:7px; font-size:9px; padding:4px 6px; white-space:nowrap; }
.recipe-card-body { padding:14px 44px 14px 14px; min-width:0; }
.card-topline { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted); font-size:10px; margin-bottom:8px; }
.status { border-radius:99px; padding:4px 6px; font-weight:850; }
.status.validated { background:#e1eee6; color:#3d6e58; }
.status.personal { background:#e8e4f1; color:#69577b; }
.status.catalog { background:#f1ede4; color:#766d5f; }
.recipe-card h3 { margin-bottom:5px; font-size:16px; line-height:1.2; }
.recipe-card p { margin-bottom:0; color:var(--muted); line-height:1.4; font-size:11px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.favorite { position:absolute; top:9px; right:9px; border:0; background:rgba(255,255,255,.75); backdrop-filter:blur(8px); width:34px; height:34px; border-radius:11px; color:#aaa69d; font-size:20px; }
.favorite.on { color:#d17a4c; }

.bottom-nav {
  position:fixed; z-index:30; bottom:0; left:0; right:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  padding:7px 8px calc(7px + env(safe-area-inset-bottom));
  background:rgba(255,253,248,.94); border-top:1px solid rgba(32,48,42,.10); backdrop-filter:blur(20px);
}
.bottom-nav button { border:0; background:transparent; display:grid; justify-items:center; gap:2px; color:#8f958f; padding:6px 2px; }
.bottom-nav button span { font-size:21px; line-height:1; }
.bottom-nav button small { font-size:9px; font-weight:750; }
.bottom-nav button.active { color:var(--green); }
.bottom-nav button.active span { width:34px; height:28px; border-radius:11px; background:var(--green-soft); display:grid; place-items:center; }

.modal-backdrop {
  position:fixed; inset:0; z-index:100; background:rgba(26,34,30,.48); backdrop-filter:blur(5px);
  display:flex; align-items:flex-end; justify-content:center; padding:0;
}
.modal-sheet {
  width:min(100%,760px); max-height:92dvh; overflow:auto; background:#fffdf8;
  border-radius:28px 28px 0 0; box-shadow:0 -20px 60px rgba(21,28,24,.22);
  position:relative; overscroll-behavior:contain;
}
.modal-handle { position:sticky; top:0; z-index:4; width:44px; height:5px; margin:8px auto -13px; border-radius:99px; background:rgba(32,48,42,.18); }
.modal-hero {
  --tone:var(--green); --tone-soft:var(--green-soft);
  position:relative; padding:34px 52px 22px 20px; background:linear-gradient(145deg,var(--tone-soft),#fffdf8);
  display:grid; grid-template-columns:68px 1fr; gap:14px; align-items:center;
}
.modal-art { width:68px; height:68px; display:grid; place-items:center; border-radius:22px; background:rgba(255,255,255,.72); color:var(--tone); font-size:34px; font-weight:900; }
.modal-hero h2 { margin:8px 0 6px; font-size:26px; }
.modal-hero p { color:#606a65; line-height:1.45; margin:0; font-size:12px; }
.close { position:absolute; right:13px; top:20px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.76); color:#69716c; font-size:22px; z-index:5; }
.modal-content { padding:18px 18px calc(28px + env(safe-area-inset-bottom)); }
.badge-row { display:flex; gap:7px; flex-wrap:wrap; }
.badge-row > span { background:#f0ede6; color:#5f6863; border-radius:99px; padding:7px 9px; font-size:10px; font-weight:800; }
.modal-actions { display:flex; gap:8px; margin:16px 0 22px; }
.modal-actions .ghost { flex:1; }
.recipe-section { margin-top:23px; }
.section-title-row { display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.section-title-row h3 { margin:0; font-size:16px; }
.section-number { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:var(--green-soft); color:var(--green); font-size:11px; font-weight:900; }
.ingredients { list-style:none; padding:0; margin:0; border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.ingredients li { display:grid; grid-template-columns:1fr auto; gap:10px; padding:11px 13px; border-top:1px solid #eee9e1; font-size:12px; }
.ingredients li:first-child { border-top:0; }
.ingredients strong { font-size:11px; }
.steps { list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.steps li { display:grid; grid-template-columns:31px 1fr; gap:9px; align-items:start; }
.steps li > span { width:31px; height:31px; border-radius:10px; display:grid; place-items:center; background:#f1eee8; color:#68716c; font-size:11px; font-weight:900; }
.steps p { margin:4px 0 0; line-height:1.55; color:#4e5853; font-size:12px; }

.form-sheet { padding:28px 18px calc(28px + env(safe-area-inset-bottom)); }
.form-head { position:relative; padding-right:40px; margin-bottom:18px; }
.form-head .close { top:-8px; right:0; }
.form-sheet label { display:grid; gap:6px; margin:12px 0; font-size:11px; font-weight:800; color:#5c6660; }
.form-sheet small { font-weight:500; color:var(--muted); }
.form-sheet textarea { resize:vertical; line-height:1.45; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0 9px; }

.install-sheet {
  width:min(100% - 24px,480px); background:#fffdf8; border-radius:28px; margin-bottom:12px;
  padding:28px 20px calc(24px + env(safe-area-inset-bottom)); position:relative;
  box-shadow:0 20px 60px rgba(21,28,24,.25);
}
.big-install-icon { width:72px; height:72px; border-radius:22px; font-size:38px; margin-bottom:20px; }
.install-sheet h2 { font-size:30px; }
.install-sheet > p { color:var(--muted); line-height:1.55; }
.install-steps { display:grid; gap:10px; margin-top:18px; }
.install-steps > div { display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:start; }
.install-steps span { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:var(--green-soft); color:var(--green); font-weight:900; }
.install-steps p { margin:4px 0 0; color:#515b56; line-height:1.5; font-size:13px; }

.toast {
  position:fixed; z-index:160; left:50%; bottom:calc(88px + env(safe-area-inset-bottom)); transform:translate(-50%,20px);
  background:#263d34; color:white; border-radius:99px; padding:10px 14px; font-size:11px; font-weight:800;
  opacity:0; pointer-events:none; transition:.2s ease;
}
.toast.show { opacity:1; transform:translate(-50%,0); }

.tone-terracotta { --tone: var(--orange); --tone-soft: var(--orange-soft); }
.tone-sage { --tone: var(--green); --tone-soft: var(--green-soft); }
.tone-blue { --tone: var(--blue); --tone-soft: var(--blue-soft); }
.tone-rose { --tone: var(--rose); --tone-soft: var(--rose-soft); }
.tone-gold { --tone: var(--gold); --tone-soft: var(--gold-soft); }
.tone-plum { --tone: var(--plum); --tone-soft: var(--plum-soft); }
.tone-mint { --tone: var(--mint); --tone-soft: var(--mint-soft); }

@media (min-width: 650px) {
  main { padding:24px 20px 60px; }
  .category-grid { grid-template-columns:repeat(4,1fr); }
  .recipe-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .recipe-open { grid-template-columns:110px 1fr; min-height:170px; }
  .principles { grid-template-columns:repeat(3,1fr); }
  .principles > div { grid-template-columns:38px 1fr; }
  .welcome-card { min-height:360px; padding:38px; }
  .food-illustration { width:280px; height:280px; right:-20px; bottom:-80px; }
  .mini-meals { grid-template-columns:repeat(2,1fr); }
  .modal-backdrop { align-items:center; padding:24px; }
  .modal-sheet { border-radius:28px; max-height:88dvh; }
  .install-sheet { margin:0; }
}
@media (max-width: 390px) {
  .recipe-open { grid-template-columns:78px 1fr; }
  .recipe-card-body { padding-right:38px; }
  .category-grid { gap:8px; }
  .category-tile { padding:14px; }
  .modal-hero { grid-template-columns:54px 1fr; }
  .modal-art { width:54px; height:54px; border-radius:17px; font-size:28px; }
}