/* RECIPE – Designsystem (Tokens) */
:root {
  --navy: #16263F; --navy2: #22395C; --orange: #E8892B; --orange-soft: #FDF1E4;
  --bg: #F6F4EF; --card: #FFFFFF; --ink: #1C2430; --muted: #6B7686; --line: #E2DED4;
  --green: #2F7D5B; --green-soft: #E7F3EC; --red: #B3261E; --red-soft: #FBE9E7; --blue-soft: #E8EEF7;
  --radius: 16px; --tap: 48px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0F1724; --card: #172235; --ink: #E9EEF5; --muted: #9AA7B8; --line: #26344B; --blue-soft: #1D2B42;
    --orange-soft: #3A2A18; --green-soft: #16332A; --red-soft: #3A1D1B; }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.45; -webkit-text-size-adjust: 100%; }
body { padding-top: var(--safe-t); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.topbar { position: sticky; top: 0; z-index: 10; background: var(--navy); color: #fff; padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
.topbar h1 { font-size: 19px; margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .brand { font-weight: 800; letter-spacing: .14em; font-size: 13px; color: #C9D3E2; }
.topbar button { background: transparent; border: 0; color: #fff; min-width: var(--tap); min-height: 40px; border-radius: 10px; cursor: pointer; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--blue-soft); color: var(--ink); white-space: nowrap; }
.pill.off { background: var(--red-soft); color: var(--red); }
.pill.ok { background: var(--green-soft); color: var(--green); }
.pill.warn { background: var(--orange-soft); color: #9A5512; }
@media (prefers-color-scheme: dark) { .pill.warn { color: #F3B676; } .pill.ok { color: #7FD1A8; } .pill.off { color: #F2948C; } }

main { max-width: 860px; margin: 0 auto; padding: 16px 16px calc(96px + var(--safe-b)); }
.nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; background: var(--card); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); padding-bottom: var(--safe-b); }
.nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; text-decoration: none; font-size: 12px; color: var(--muted); }
.nav a svg { width: 24px; height: 24px; }
.nav a.active { color: var(--orange); font-weight: 600; }

h2 { font-size: 24px; margin: 8px 0 12px; }
h3 { font-size: 18px; margin: 18px 0 8px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 0 0 12px; }
.card.accent { border-left: 5px solid var(--orange); }
.card.info { background: var(--blue-soft); border-color: transparent; }
.card.warn { background: var(--orange-soft); border-color: transparent; }
.card.err { background: var(--red-soft); border-color: transparent; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: 8px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); cursor: pointer; font-weight: 600; text-decoration: none; }
.btn.primary { background: var(--orange); border-color: var(--orange); color: #1b1206; }
.btn.dark { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.danger { color: var(--red); }
.btn.sm { min-height: 38px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

label.f { display: block; font-size: 14px; color: var(--muted); margin: 10px 0 4px; }
input[type=text], input[type=number], input[type=email], input[type=password], input[type=url], input[type=search], select, textarea {
  width: 100%; min-height: var(--tap); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--card);
}
textarea { min-height: 140px; resize: vertical; }
input[type=range] { width: 100%; accent-color: var(--orange); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 12px; min-height: 36px; cursor: pointer; font-size: 14px; }
.chip[aria-pressed=true] { background: var(--navy); color: #fff; border-color: var(--navy); }

.rcard { display: block; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rcard .img { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--navy), var(--navy2)); display: flex; align-items: flex-end; padding: 12px; color: #fff; font-weight: 700; font-size: 20px; background-size: cover; background-position: center; }
.rcard .body { padding: 12px 14px; }
.rcard .meta { font-size: 13px; color: var(--muted); }

.ing { list-style: none; padding: 0; margin: 0; }
.ing li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ing .amt { min-width: 92px; font-weight: 700; text-align: right; }
.ing .sec { font-weight: 700; color: var(--muted); border: 0; padding-top: 14px; }
.steps { padding-left: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding: 10px 0 10px 44px; border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 10px; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 700; }
.status { font-size: 11px; padding: 1px 7px; border-radius: 6px; margin-left: 6px; vertical-align: middle; }
.status.original { background: var(--green-soft); color: var(--green); }
.status.extern { background: var(--blue-soft); }
.status.plausibel { background: var(--orange-soft); color: #9A5512; }
.status.unbekannt { background: var(--red-soft); color: var(--red); }

/* Einkauf */
.shop-item { display: flex; align-items: center; gap: 12px; padding: 6px 4px; border-bottom: 1px solid var(--line); min-height: 58px; }
.shop-item input[type=checkbox] { width: 30px; height: 30px; accent-color: var(--green); flex: 0 0 auto; }
.shop-item .name { flex: 1; }
.shop-item.done .name { text-decoration: line-through; color: var(--muted); }
.aisle { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 16px 0 4px; }

/* Plan */
.day { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; }
.day.today { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange-soft); }
.day h4 { margin: 0 0 6px; }
.entry { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px dashed var(--line); flex-wrap: wrap; }

/* Kochmodus */
.cook { font-size: 26px; line-height: 1.5; }
.cook .stepno { font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.cook mark { background: var(--orange-soft); color: inherit; padding: 0 4px; border-radius: 6px; }
.cook .tlink { background: var(--blue-soft); border: 0; border-radius: 8px; padding: 0 6px; font: inherit; cursor: pointer; text-decoration: underline; }
.timers { position: sticky; top: 60px; z-index: 5; display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.timer { background: var(--navy); color: #fff; border-radius: 12px; padding: 8px 12px; font-size: 18px; font-weight: 700; display: flex; gap: 10px; align-items: center; }
.timer.done { background: var(--red); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .55; } }

.modal { position: fixed; inset: 0; background: rgba(10, 16, 26, .55); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.modal .sheet { background: var(--bg); width: 100%; max-width: 640px; max-height: 92vh; overflow: auto; border-radius: 20px 20px 0 0; padding: 18px 18px calc(18px + var(--safe-b)); }
@media (min-width: 700px) { .modal { align-items: center; } .modal .sheet { border-radius: 20px; } }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(80px + var(--safe-b)); background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 12px; z-index: 60; max-width: 90vw; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.cards-preview { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.cards-preview canvas, .cards-preview img { width: 180px; height: 320px; border-radius: 12px; border: 1px solid var(--line); flex: 0 0 auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th, table.t td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.empty { text-align: center; padding: 28px 12px; color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media print {
  .topbar, .nav, .noprint, .toast { display: none !important; }
  body, main { background: #fff; color: #000; padding: 0; }
  .card { border: 0; padding: 0; }
  .steps li::before { background: #000; }
}
.card.ok { background: var(--green-soft); border-color: transparent; }
.tick { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--line); display: inline-grid; place-items: center; font-weight: 800; color: #fff; flex: 0 0 auto; }
.tick.on { background: var(--green); border-color: var(--green); }
.timer .btn { background: rgba(255,255,255,.15); color: #fff; border-color: transparent; min-height: 32px; }

/* =====================================================================
   RECIPI 1.1 · Signature design system · November 2026
   Brand: Deep forest / vibrant mandarin / warm porcelain.
   Existing semantic classes and functionality are preserved.
   ===================================================================== */
:root,
:root[data-theme="light"] {
  --navy:#07452F; --navy2:#136548; --orange:#FF821C; --orange-soft:#FFF0DE;
  --bg:#FFF8EE; --card:#FFFFFF; --ink:#203128; --muted:#6A7B70; --line:#E9E4D9;
  --green:#157A54; --green-soft:#E3F3E7; --red:#BF4E44; --red-soft:#FFF0EC;
  --blue-soft:#E8F2ED; --radius:22px; --tap:48px;
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --navy:#053B2D; --navy2:#145940; --orange:#FF963D; --orange-soft:#3A2C20;
    --bg:#101C18; --card:#1A2B24; --ink:#F4F5ED; --muted:#A7B5A7; --line:#31463B;
    --green:#80D8A9; --green-soft:#163C2B; --red:#FF938A; --red-soft:#3C2623;
    --blue-soft:#223C32; color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --navy:#053B2D; --navy2:#145940; --orange:#FF963D; --orange-soft:#3A2C20;
  --bg:#101C18; --card:#1A2B24; --ink:#F4F5ED; --muted:#A7B5A7; --line:#31463B;
  --green:#80D8A9; --green-soft:#163C2B; --red:#FF938A; --red-soft:#3C2623;
  --blue-soft:#223C32; color-scheme:dark;
}
html { scroll-behavior:smooth; }
html,body { font-size:16px; line-height:1.5; }
body { min-height:100dvh; -webkit-tap-highlight-color:transparent; }
button,select,input,textarea { font-size:16px; }
button,.btn,a,.chip,.nav a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
::selection { background:#FFC896; color:#153B2C; }

/* Brand header and navigation */
.topbar {
  min-height:69px; padding:10px clamp(15px,4vw,28px);
  background:linear-gradient(112deg,#043625 0%,#075039 65%,#0A6145 100%);
  border-bottom:1px solid rgba(255,255,255,.08); box-shadow:0 5px 23px rgba(4,41,26,.11);
  gap:10px;
}
.header-icon { flex:0 0 auto; display:grid; place-items:center; width:44px; height:44px; text-decoration:none; border-radius:14px; overflow:hidden; box-shadow:0 2px 14px rgba(0,0,0,.18); }
.header-icon img { width:44px; height:44px; object-fit:cover; display:block; }
.topbar h1 { font-size:18px; font-weight:800; letter-spacing:-.02em; line-height:1.2; }
.topbar .brand { color:#FFF7E6; font-size:20px; letter-spacing:.035em; font-weight:900; }
.topbar button { min-width:38px; min-height:42px; border-radius:13px; background:rgba(255,255,255,.09); }
.topbar button:active { background:rgba(255,255,255,.2); }
.topbar .pill { background:rgba(255,255,255,.15); color:#FFF5E9; border:1px solid rgba(255,255,255,.2); padding:5px 10px; font-weight:600; }
.topbar .pill.ok { background:rgba(47,154,104,.2); color:#D9FCE4; }
.topbar .pill.off { background:#5B302D; color:#FFE2DB; }
.topbar .pill.warn { background:rgba(238,158,65,.19); color:#FFE1A8; }
main { max-width:1120px; padding:22px clamp(14px,3vw,32px) calc(116px + var(--safe-b)); }
.nav {
  bottom:calc(8px + var(--safe-b)); left:12px; right:12px; width:auto; max-width:560px;
  margin:0 auto; padding:5px; grid-template-columns:repeat(5,minmax(0,1fr)); border:1px solid var(--line);
  border-radius:24px; background:var(--card); box-shadow:0 14px 42px rgba(9,45,29,.18);
  backdrop-filter:saturate(155%) blur(18px); -webkit-backdrop-filter:saturate(155%) blur(18px);
}
.nav a { min-height:63px; padding:6px 2px; gap:3px; font-size:11px; font-weight:600; border-radius:17px; transition:background .16s,transform .16s,color .16s; }
.nav a svg { width:23px; height:23px; }
.nav a.active { background:var(--green-soft); color:var(--navy2); font-weight:800; }
:root[data-theme="dark"] .nav a.active { color:#92DEBB; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .nav a.active { color:#92DEBB; } }
.nav .nav-import { background:var(--orange-soft); color:var(--navy); }
.nav .nav-import svg { width:24px; height:24px; }
.nav .nav-import.active { background:var(--orange); color:#251300; }

/* Editorial typography and rhythm */
h2 { font-size:clamp(23px,4.1vw,32px); letter-spacing:-.042em; font-weight:800; line-height:1.18; margin:8px 0 15px; }
h3 { font-size:19px; line-height:1.27; letter-spacing:-.026em; margin:19px 0 11px; font-weight:750; }
h4 { font-size:16px; }
p { margin:9px 0 14px; }
a { text-decoration-color:var(--orange); text-underline-offset:3px; }
.small { font-size:13px; }
.muted { color:var(--muted); }
.eyebrow, .hero-eyebrow { font-size:11px; font-weight:850; letter-spacing:.16em; color:var(--green); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:10px; margin:27px 0 13px; }
.section-heading h2 { margin:0; }
.section-heading > a { font-size:13px; color:var(--orange); font-weight:750; white-space:nowrap; text-decoration:none; padding:5px 0; }
.count { background:var(--green-soft); color:var(--green); padding:2px 9px; font-size:14px; border-radius:20px; vertical-align:middle; font-weight:800; }

/* Hero: typographic and decorative so it is always available offline. */
.hero {
  position:relative; isolation:isolate; overflow:hidden; min-height:235px; padding:26px 24px 23px;
  border-radius:28px; background:linear-gradient(118deg,#063A28 8%,#095038 61%,#166D47 100%);
  color:#FFFCF1; box-shadow:0 18px 32px rgba(4,54,34,.18);
}
.hero::before { content:""; position:absolute; z-index:-1; right:-72px; top:-96px; width:290px; height:290px; border:50px solid rgba(255,255,255,.06); border-radius:50%; transform:rotate(26deg); }
.hero::after { content:""; position:absolute; z-index:-1; right:45px; bottom:-80px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle at 45% 35%, rgba(255,145,37,.28),rgba(255,145,37,0) 66%); }
.hero-content { position:relative; z-index:1; max-width:570px; }
.hero-eyebrow { color:#FFBC7E; }
.hero h2 { font-size:clamp(32px,7vw,49px); line-height:1.06; letter-spacing:-.053em; margin:11px 0; max-width:400px; }
.hero h2 em { font-style:normal; color:#FF982A; }
.hero p { color:#E0F2E8; font-size:14px; line-height:1.52; max-width:280px; margin:0 0 19px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:9px; }
.hero-actions .btn { min-height:43px; padding:0 13px; font-size:12px; border-radius:12px; }
.hero-secondary { border-color:rgba(255,255,255,.27)!important; background:rgba(255,255,255,.09)!important; color:#fff; }
.hero-mark { position:absolute; right:2%; top:16%; color:rgba(255,171,73,.16); font-size:190px; line-height:1; transform:rotate(-14deg); pointer-events:none; }

/* Cards and feature teasers */
.card,.day { border:1px solid var(--line); background:var(--card); border-radius:var(--radius); box-shadow:0 5px 18px rgba(13,48,32,.035); }
.card { padding:19px; margin-bottom:14px; }
.card.accent { border-left:4px solid var(--orange); }
.card.info { background:var(--blue-soft); }
.card.warn { background:var(--orange-soft); }
.card.err { background:var(--red-soft); }
.card.ok { background:var(--green-soft); }
.grid { gap:13px; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); }
.dashboard-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.stat-tile { display:flex; align-items:center; gap:12px; padding:14px; text-decoration:none; margin:0; min-height:89px; }
.stat-icon { display:grid; place-items:center; background:var(--orange-soft); font-size:23px; width:46px; height:46px; flex:0 0 46px; border-radius:15px; }
.stat-tile div { display:flex; flex-direction:column; line-height:1.22; min-width:0; }
.stat-tile b { font-size:23px; font-weight:850; }
.stat-tile .small { font-size:11px; line-height:1.3; }
.stat-arrow { margin-left:auto; font-size:22px; color:var(--muted); }
.recipe-highlights { grid-template-columns:repeat(2,minmax(0,1fr)); }
.rcard { border-color:var(--line); border-radius:20px; overflow:hidden; box-shadow:0 9px 18px rgba(12,45,28,.08); transition:transform .18s,box-shadow .18s; }
.rcard:active { transform:scale(.982); }
.rcard .img { aspect-ratio:1.18; min-height:148px; position:relative; display:flex; align-items:flex-end; background-size:cover; background-position:center; overflow:hidden; padding:14px; font-size:16px; line-height:1.18; text-shadow:0 2px 9px rgba(0,0,0,.26); }
.recipe-art { background-image:linear-gradient(145deg,#376A4C 0%,#10563E 55%,#073B30 100%); }
.recipe-art.citrus { background-image:linear-gradient(142deg,#F6AD5C 0%,#D87137 55%,#935531 100%); }
.recipe-art.herb { background-image:linear-gradient(145deg,#8CAF72 0%,#45875A 49%,#115443 100%); }
.recipe-art.terra { background-image:linear-gradient(140deg,#D8A272 0%,#AA674E 51%,#633C35 100%); }
.recipe-art.sun { background-image:linear-gradient(140deg,#F6C572 0%,#EC9638 51%,#B85C26 100%); }
.rcard .img::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(11,34,23,.77),transparent 68%); z-index:0; }
.rcard .img .recipe-title { position:relative; z-index:2; display:block; font-weight:780; font-size:16px; letter-spacing:-.022em; color:#fff; overflow-wrap:anywhere; }
.rcard .img .foodglyph { position:absolute; z-index:0; top:6px; right:10px; font-size:clamp(64px,11vw,91px); line-height:1.2; filter:drop-shadow(0 9px 9px rgba(37,36,20,.22)); transform:rotate(-11deg); pointer-events:none; text-shadow:none; }
.rcard .body { padding:10px 12px 13px; display:flex; align-items:center; gap:5px; }
.rcard .meta { flex:1; font-size:11px; line-height:1.4; font-weight:600; }
.card-chevron { color:var(--orange); font-size:22px; line-height:1; }
.detail-art { height:220px; border-radius:24px; display:flex; justify-content:center; align-items:center; position:relative; overflow:hidden; margin-bottom:19px; }
.detail-art .foodglyph { font-size:122px; filter:drop-shadow(0 14px 18px rgba(0,0,0,.22)); }
.detail-art-tag { position:absolute; bottom:15px; left:16px; color:#FFF8EE; font-size:11px; font-weight:800; letter-spacing:.11em; text-shadow:0 1px 8px rgba(0,0,0,.22); }
.detail-photo { width:100%; max-height:380px; aspect-ratio:1.6; object-fit:cover; border-radius:24px; margin-bottom:16px; }
.detail-title { align-items:start; gap:8px; }
.detail-title h2 { flex:1; min-width:0; overflow-wrap:anywhere; }

/* Forms and actions */
.btn { border-radius:14px; font-size:14px; font-weight:760; transition:transform .14s, background .14s, box-shadow .14s; }
.btn:active:not(:disabled) { transform:scale(.975); }
.btn.primary { background:var(--orange); border-color:var(--orange); color:#211508; box-shadow:0 5px 13px rgba(238,117,33,.17); }
.btn.dark { background:var(--navy); border-color:var(--navy); }
.btn.sm { font-size:13px; min-height:38px; }
input[type=text],input[type=number],input[type=email],input[type=password],input[type=url],input[type=search],select,textarea {
  background:var(--card); border-color:var(--line); border-radius:14px; padding:11px 14px;
}
input[type=search].search-field { min-height:52px; padding-left:44px; background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="none" stroke="%23868E86" stroke-width="2" viewBox="0 0 24 24"%3E%3Ccircle cx="11" cy="11" r="7"/%3E%3Cpath d="m20 20-4-4"/%3E%3C/svg%3E'); background-position:15px center; background-repeat:no-repeat; }
input:focus,select:focus,textarea:focus { border-color:var(--green); outline:2px solid rgba(36,144,91,.12); outline-offset:0; }
.chips { gap:8px; }
.chip { min-height:39px; border-radius:14px; font-weight:600; }
.chip[aria-pressed=true] { background:var(--navy); border-color:var(--navy); }
label.f { font-size:13px; font-weight:700; }
.pill { border-radius:99px; padding:4px 11px; font-weight:650; }
.status { border-radius:10px; padding:3px 7px; font-weight:650; }
.ing li { padding:12px 2px; align-items:baseline; }
.ing .amt { min-width:78px; color:var(--green); font-size:15px; }
.steps li { padding:14px 0 14px 44px; }
.steps li::before { top:13px; background:var(--navy); }
.shop-item { min-height:64px; border-bottom-color:var(--line); padding:9px 4px; }
.shop-item input[type=checkbox] { width:28px; height:28px; }
.shop-item .name { min-width:0; }
.aisle { font-size:11px; font-weight:850; color:var(--green); letter-spacing:.13em; margin:21px 0 7px; }
.day { padding:16px; }
.day.today { border-color:var(--orange); box-shadow:0 0 0 2px var(--orange-soft); }
.cook { font-size:clamp(22px,4vw,30px); line-height:1.55; }
.cook .stepno { color:var(--green); font-size:13px; font-weight:850; }
.cook mark { background:var(--orange-soft); border-radius:7px; }
.timer { background:var(--navy); }
.modal { background:rgba(4,25,18,.68); }
.modal .sheet { border-radius:26px 26px 0 0; padding:22px 18px calc(28px + var(--safe-b)); }
.toast { background:#07452F; color:#FFF8EE; border-radius:14px; max-width:calc(100vw - 48px); }
.empty { border:1.5px dashed var(--line); border-radius:19px; padding:29px 17px; background:var(--card); }
.empty a { color:var(--green); font-weight:750; }
summary { cursor:pointer; }
summary::marker { color:var(--orange); }

/* Brand onboarding and settings */
.onboard-brand { text-align:center; padding:18px 0 14px; }
.onboard-brand img { border-radius:22px; box-shadow:0 8px 19px rgba(11,69,40,.16); }
.onboard-brand h2 { font-size:29px; margin:14px 0 7px; }
.onboard-brand h2 span { color:var(--green); }
.onboard-brand p { color:var(--muted); margin:0 0 9px; }
.settings-intro { display:flex; align-items:center; gap:13px; margin:2px 0 19px; }
.settings-intro img { border-radius:18px; box-shadow:0 5px 15px rgba(8,44,27,.16); }
.settings-intro div { display:flex; flex-direction:column; }
.settings-intro b { font-size:23px; letter-spacing:.02em; }
.settings-intro span { color:var(--muted); font-size:13px; }

@media (min-width:690px) {
  .hero { min-height:255px; padding:30px 36px; }
  .hero p { max-width:380px; }
  .recipe-highlights { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid:has(> .rcard) { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .rcard .img { min-height:185px; }
}
@media (max-width:480px) {
  main { padding:16px 14px calc(106px + var(--safe-b)); }
  .hero { min-height:231px; padding:21px; }
  .hero-mark { font-size:175px; right:-14px; top:25%; }
  .hero p { max-width:270px; }
  .dashboard-stats .stat-icon { width:39px; height:39px; flex-basis:39px; font-size:20px; }
  .stat-tile { padding:10px 11px; gap:8px; }
  .stat-arrow { display:none; }
  .recipe-highlights, .grid:has(> .rcard) { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
  .rcard .img { min-height:142px; padding:10px; }
  .rcard .img .recipe-title { font-size:14px; }
  .rcard .meta { font-size:10px; }
  .rcard .img .foodglyph { font-size:75px; }
  .card { padding:15px; }
  .detail-art { height:195px; }
  .nav { left:8px; right:8px; bottom:calc(5px + var(--safe-b)); padding:4px; border-radius:22px; }
  .nav a { min-height:60px; font-size:10px; }
  .topbar { min-height:64px; padding:8px 13px; }
  .topbar h1 { font-size:15px; }
  .topbar .brand { font-size:19px; }
  .header-icon,.header-icon img { width:39px; height:39px; }
}
@media (min-width:1150px) {
  main { max-width:1040px; }
  .hero { padding:35px 42px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition-duration:0.01ms!important; animation-duration:0.01ms!important; scroll-behavior:auto!important; }
}
@media print {
  .topbar,.nav,.hero { display:none!important; }
  main { padding:0!important; max-width:100%; }
  .card,.day { box-shadow:none; }
}
/* High-contrast orange import action in dark presentation. */
:root[data-theme="dark"] .nav .nav-import { background:var(--orange); color:#211408; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .nav .nav-import { background:var(--orange); color:#211408; } }