/* Family Kitchen styles. Ported from reference/artifact-v3.html <style> verbatim; fonts self-hosted (OFL, web/fonts). */
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/caveat-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/caveat-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/fredoka-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/fredoka-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/fredoka-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/lato-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/lato-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/nunito-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/nunito-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/nunito-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/nunito-latin-800-normal.woff2') format('woff2'); }

/* Layout: one centered column (760px max), bottom tab bar, bottom sheets for every detail view.
   Three skins (warm / clean / classic) are token sets on :root[data-skin]; each has a dark variant. */
:root {
  /* Warm Kitchen, light (default skin) */
  --bg:#fff1d6; --surface:#fff8ea; --surface-2:#ffe7bd; --ink:#3b2414; --ink-head:#3b2414; --ink-2:#7a5a3a; --ink-3:#a8865a;
  --line:#f0dcb4; --accent:#e4572e; --accent-ink:#ffffff; --accent-deep:#b23d1c; --accent-text:#d9482b;
  --accent-soft:#ffe7bd; --accent-soft-ink:#7a3a12;
  --t1:#e4572e; --t1-ink:#ffffff; --t1-deep:#b23d1c;
  --t2:#f2b233; --t2-ink:#4a2e0c; --t2-deep:#c98a12;
  --t3:#7b8b37; --t3-ink:#ffffff; --t3-deep:#5a6825;
  --chip:#fff8ea; --chip-ink:#4a2e0c; --chip-on:#3b2414; --chip-on-ink:#fff1d6;
  --pill:rgba(255,255,255,.22); --pill-faint:rgba(255,255,255,.1);
  --rule:#d9534a; --lines:transparent;
  --ok:#5a6825; --danger:#c0392b; --danger-ink:#ffffff;
  --shadow:rgba(90,50,10,.14); --scrim:rgba(40,20,5,.45);
  --nav-bg:#fff8ea; --nav-ink:#a8865a;
  --f-display:'Fredoka', 'Nunito', ui-rounded, system-ui, sans-serif;
  --f-body:'Nunito', ui-rounded, system-ui, -apple-system, sans-serif;
  --r-tile:20px; --r-card:20px; --r-sm:12px; --r-btn:14px;
  --btn-shadow:0 3px 0 var(--accent-deep);
  color-scheme: light;
}
:root[data-skin="warm"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root[data-skin="warm"]:not([data-theme="light"]) {
    --bg:#24170e; --surface:#33231a; --surface-2:#45301f; --ink:#fbead0; --ink-head:#fff3df; --ink-2:#d9b98f; --ink-3:#a88a66;
    --line:#4a3524; --accent:#ef6a43; --accent-ink:#ffffff; --accent-deep:#8f3216; --accent-text:#ff8a63;
    --accent-soft:#4a2c18; --accent-soft-ink:#ffcf9e;
    --t1:#d4512b; --t1-ink:#ffffff; --t1-deep:#8f3216;
    --t2:#e0a52e; --t2-ink:#3a2208; --t2-deep:#9c6c0e;
    --t3:#6f7f30; --t3-ink:#ffffff; --t3-deep:#46521c;
    --chip:#33231a; --chip-ink:#fbead0; --chip-on:#f2b233; --chip-on-ink:#2a1a08;
    --ok:#a9bd5a; --danger:#e05a47;
    --shadow:rgba(0,0,0,.35); --scrim:rgba(0,0,0,.6);
    --nav-bg:#2c1e14; --nav-ink:#a88a66;
    color-scheme: dark;
  }
}
:root[data-skin="warm"][data-theme="dark"] {
  --bg:#24170e; --surface:#33231a; --surface-2:#45301f; --ink:#fbead0; --ink-head:#fff3df; --ink-2:#d9b98f; --ink-3:#a88a66;
  --line:#4a3524; --accent:#ef6a43; --accent-ink:#ffffff; --accent-deep:#8f3216; --accent-text:#ff8a63;
  --accent-soft:#4a2c18; --accent-soft-ink:#ffcf9e;
  --t1:#d4512b; --t1-ink:#ffffff; --t1-deep:#8f3216;
  --t2:#e0a52e; --t2-ink:#3a2208; --t2-deep:#9c6c0e;
  --t3:#6f7f30; --t3-ink:#ffffff; --t3-deep:#46521c;
  --chip:#33231a; --chip-ink:#fbead0; --chip-on:#f2b233; --chip-on-ink:#2a1a08;
  --ok:#a9bd5a; --danger:#e05a47;
  --shadow:rgba(0,0,0,.35); --scrim:rgba(0,0,0,.6);
  --nav-bg:#2c1e14; --nav-ink:#a88a66;
  color-scheme: dark;
}

/* Clean (photo-forward) */
:root[data-skin="clean"] {
  --bg:#f3f4f6; --surface:#ffffff; --surface-2:#f3f4f6; --ink:#111827; --ink-head:#111827; --ink-2:#6b7280; --ink-3:#9ca3af;
  --line:#e5e7eb; --accent:#16a34a; --accent-ink:#ffffff; --accent-deep:#15803d; --accent-text:#15803d;
  --accent-soft:#dcfce7; --accent-soft-ink:#166534;
  --t1:#bbf7d0; --t1-ink:#111827; --t1-deep:#86efac;
  --t2:#fde68a; --t2-ink:#111827; --t2-deep:#fcd34d;
  --t3:#fed7aa; --t3-ink:#111827; --t3-deep:#fdba74;
  --chip:#ffffff; --chip-ink:#374151; --chip-on:#111827; --chip-on-ink:#ffffff;
  --pill:#f3f4f6; --pill-faint:#f9fafb;
  --ok:#16a34a; --danger:#dc2626; --danger-ink:#ffffff;
  --shadow:rgba(17,24,39,.06); --scrim:rgba(17,24,39,.4);
  --nav-bg:rgba(255,255,255,.94); --nav-ink:#9ca3af;
  --f-display:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-tile:18px; --r-card:20px; --r-sm:12px; --r-btn:14px;
  --btn-shadow:none;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="clean"]:not([data-theme="light"]) {
    --bg:#0e1013; --surface:#181b20; --surface-2:#22262d; --ink:#f3f4f6; --ink-head:#ffffff; --ink-2:#a1a7b3; --ink-3:#6b7280;
    --line:#2a2f37; --accent:#22c55e; --accent-ink:#06210f; --accent-deep:#15803d; --accent-text:#4ade80;
    --accent-soft:#12321d; --accent-soft-ink:#86efac;
    --t1:#1f4d33; --t1-ink:#f3f4f6; --t1-deep:#14532d;
    --t2:#4d4220; --t2-ink:#f3f4f6; --t2-deep:#3b3217;
    --t3:#4d3320; --t3-ink:#f3f4f6; --t3-deep:#3b2717;
    --chip:#181b20; --chip-ink:#e5e7eb; --chip-on:#f3f4f6; --chip-on-ink:#111827;
    --pill:#22262d; --pill-faint:#1c1f25;
    --ok:#4ade80; --danger:#f87171; --danger-ink:#1a0505;
    --shadow:rgba(0,0,0,.35); --scrim:rgba(0,0,0,.6);
    --nav-bg:rgba(24,27,32,.96); --nav-ink:#6b7280;
    color-scheme: dark;
  }
}
:root[data-skin="clean"][data-theme="dark"] {
  --bg:#0e1013; --surface:#181b20; --surface-2:#22262d; --ink:#f3f4f6; --ink-head:#ffffff; --ink-2:#a1a7b3; --ink-3:#6b7280;
  --line:#2a2f37; --accent:#22c55e; --accent-ink:#06210f; --accent-deep:#15803d; --accent-text:#4ade80;
  --accent-soft:#12321d; --accent-soft-ink:#86efac;
  --t1:#1f4d33; --t1-ink:#f3f4f6; --t1-deep:#14532d;
  --t2:#4d4220; --t2-ink:#f3f4f6; --t2-deep:#3b3217;
  --t3:#4d3320; --t3-ink:#f3f4f6; --t3-deep:#3b2717;
  --chip:#181b20; --chip-ink:#e5e7eb; --chip-on:#f3f4f6; --chip-on-ink:#111827;
  --pill:#22262d; --pill-faint:#1c1f25;
  --ok:#4ade80; --danger:#f87171; --danger-ink:#1a0505;
  --shadow:rgba(0,0,0,.35); --scrim:rgba(0,0,0,.6);
  --nav-bg:rgba(24,27,32,.96); --nav-ink:#6b7280;
  color-scheme: dark;
}

/* Classic Card (index card) */
:root[data-skin="classic"] {
  --bg:#e8dcc4; --surface:#fffcf2; --surface-2:#f5eedc; --ink:#2b3a55; --ink-head:#26221c; --ink-2:#6b6255; --ink-3:#a39a88;
  --line:#e0d4ba; --accent:#d9534a; --accent-ink:#ffffff; --accent-deep:#a83a32; --accent-text:#c8483d;
  --accent-soft:#fbe3df; --accent-soft-ink:#a83a32;
  --t1:#e7b8a6; --t1-ink:#26221c; --t1-deep:#d39a85;
  --t2:#eed9a4; --t2-ink:#26221c; --t2-deep:#dcc27f;
  --t3:#c9d3a5; --t3-ink:#26221c; --t3-deep:#b0bd85;
  --chip:#fffcf2; --chip-ink:#c8483d; --chip-on:#d9534a; --chip-on-ink:#ffffff;
  --pill:transparent; --pill-faint:transparent;
  --rule:#d9534a; --lines:#c6d9ec;
  --ok:#4f7a3a; --danger:#c0392b; --danger-ink:#ffffff;
  --shadow:rgba(80,60,20,.16); --scrim:rgba(40,30,15,.45);
  --nav-bg:#fffcf2; --nav-ink:#8a7f6c;
  --f-display:'Caveat', 'Bradley Hand', 'Segoe Print', cursive;
  --f-body:'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-tile:3px; --r-card:4px; --r-sm:4px; --r-btn:999px;
  --btn-shadow:none;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="classic"]:not([data-theme="light"]) {
    --bg:#1c1915; --surface:#2a251e; --surface-2:#332d25; --ink:#e9e1cf; --ink-head:#f5eddc; --ink-2:#b7ab95; --ink-3:#857a68;
    --line:#3d362c; --accent:#e0675c; --accent-ink:#ffffff; --accent-deep:#9c3a32; --accent-text:#ef8a80;
    --accent-soft:#3d2622; --accent-soft-ink:#f3b0a8;
    --t1:#6b3f33; --t1-ink:#f5eddc; --t1-deep:#4e2c24;
    --t2:#6b5a33; --t2-ink:#f5eddc; --t2-deep:#4e4124;
    --t3:#4e5a33; --t3-ink:#f5eddc; --t3-deep:#384124;
    --chip:#2a251e; --chip-ink:#ef8a80; --chip-on:#e0675c; --chip-on-ink:#ffffff;
    --rule:#c4544a; --lines:rgba(130,165,205,.16);
    --ok:#9cc27e; --danger:#e05a47;
    --shadow:rgba(0,0,0,.4); --scrim:rgba(0,0,0,.6);
    --nav-bg:#2a251e; --nav-ink:#857a68;
    color-scheme: dark;
  }
}
:root[data-skin="classic"][data-theme="dark"] {
  --bg:#1c1915; --surface:#2a251e; --surface-2:#332d25; --ink:#e9e1cf; --ink-head:#f5eddc; --ink-2:#b7ab95; --ink-3:#857a68;
  --line:#3d362c; --accent:#e0675c; --accent-ink:#ffffff; --accent-deep:#9c3a32; --accent-text:#ef8a80;
  --accent-soft:#3d2622; --accent-soft-ink:#f3b0a8;
  --t1:#6b3f33; --t1-ink:#f5eddc; --t1-deep:#4e2c24;
  --t2:#6b5a33; --t2-ink:#f5eddc; --t2-deep:#4e4124;
  --t3:#4e5a33; --t3-ink:#f5eddc; --t3-deep:#384124;
  --chip:#2a251e; --chip-ink:#ef8a80; --chip-on:#e0675c; --chip-on-ink:#ffffff;
  --rule:#c4544a; --lines:rgba(130,165,205,.16);
  --ok:#9cc27e; --danger:#e05a47;
  --shadow:rgba(0,0,0,.4); --scrim:rgba(0,0,0,.6);
  --nav-bg:#2a251e; --nav-ink:#857a68;
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.45;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0 calc(92px + env(safe-area-inset-bottom, 0px));
  -webkit-tap-highlight-color: transparent; overflow-x: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: default; opacity: .55; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { margin: 0; text-wrap: balance; color: var(--ink-head); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { max-width: 760px; margin: 0 auto; }
.muted { color: var(--ink-2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 6px; }
.brand { font: 700 15px/1 var(--f-display); letter-spacing: .02em; color: var(--accent-text); display: flex; align-items: center; gap: 8px; }
.brand svg { width: 20px; height: 20px; }
[data-skin="classic"] .brand { font-size: 24px; letter-spacing: 0; }
.iconbtn { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; color: var(--ink-2); background: var(--surface); border: 1.5px solid var(--line); flex: none; }
.iconbtn svg { width: 20px; height: 20px; }

/* banner + toast */
.banner { margin: 6px 0 10px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-soft-ink); font-size: 13.5px; font-weight: 600; }
.toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: 13.5px; z-index: 80; transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* bottom nav */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--nav-bg); border-top: 1.5px solid var(--line);
  padding: 8px max(16px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nav-in { max-width: 760px; margin: 0 auto; display: flex; align-items: center; justify-content: space-around; gap: 4px; }
.nav a, .nav .tab { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 64px; padding: 4px 6px; color: var(--nav-ink); text-decoration: none; font: 600 12px/1 var(--f-display); }
[data-skin="classic"] .nav .tab { font-size: 18px; }
.nav .tab svg { width: 22px; height: 22px; }
.nav .tab[aria-current="page"] { color: var(--accent-text); }
.fab { background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 11px 16px; font: 700 14px/1 var(--f-display); box-shadow: var(--btn-shadow); white-space: nowrap; }
[data-skin="warm"] .fab { background: var(--t3); color: var(--t3-ink); box-shadow: 0 3px 0 var(--t3-deep); }
[data-skin="clean"] .fab { background: var(--ink); color: var(--bg); }
[data-skin="classic"] .fab { font-size: 19px; padding: 8px 16px; }

/* generic controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--accent); color: var(--accent-ink); padding: 11px 16px; border-radius: var(--r-btn);
  font: 700 14.5px/1.1 var(--f-display); box-shadow: var(--btn-shadow); white-space: nowrap; }
[data-skin="classic"] .btn { font-size: 20px; padding: 7px 18px; }
.btn.ghost { background: transparent; color: var(--accent-text); box-shadow: inset 0 0 0 1.5px currentColor; }
.btn.quiet { background: var(--surface-2); color: var(--ink); box-shadow: none; }
.btn.danger { background: var(--danger); color: var(--danger-ink); box-shadow: none; }
.btn.wide { width: 100%; }
.pill { padding: 7px 12px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line); font-weight: 700; font-size: 13px; color: var(--accent-text); white-space: nowrap; }
.chiprow { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.chiprow::-webkit-scrollbar { display: none; }
.chipwrap { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--chip); color: var(--chip-ink); border: 1.5px solid var(--line);
  font-weight: 700; font-size: 13px; line-height: 1.1; white-space: nowrap; flex: none; }
.chip[aria-pressed="true"] { background: var(--chip-on); color: var(--chip-on-ink); border-color: var(--chip-on); }
.chip svg { width: 14px; height: 14px; }
.seg { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 3px; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg button { padding: 7px 12px; border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px var(--shadow); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .lbl { font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
input[type="text"], input[type="search"], input[type="url"], input[type="number"], textarea, select {
  width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border-radius: var(--r-sm); border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); }
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
.row { display: flex; gap: 8px; align-items: center; }
.row > input { flex: 1; min-width: 0; }
.grid2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.err { color: var(--danger); font-weight: 700; font-size: 13px; }
.badge-ex { display: inline-block; font: 800 10px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; background: var(--ink); color: var(--bg); }

/* ---------- week head ---------- */
.wk-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 8px 0 14px; flex-wrap: wrap; }
.wk-kicker { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--accent-text); }
.wk-title { font: 700 30px/1.05 var(--f-display); color: var(--ink-head); }
[data-skin="clean"] .wk-title { font-size: 26px; letter-spacing: -.02em; }
[data-skin="classic"] .wk-title { font-size: 36px; }
.wk-nav { display: flex; gap: 6px; align-items: center; }
.hint { background: var(--surface); border: 1.5px dashed var(--line); border-radius: var(--r-card); padding: 14px; margin-bottom: 14px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.hint p { font-weight: 700; min-width: 0; flex: 1 1 200px; }

/* ---------- day tiles (shared) ---------- */
.days { display: flex; flex-direction: column; gap: 12px; }
.day { position: relative; cursor: pointer; transform-origin: 50% 50%; border-radius: var(--r-tile); }
.day.open { cursor: default; }
.day-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.day-name { font-weight: 700; }
.dn-short, .dd-short { display: none; }
.today-pill { margin-left: auto; font: 800 10px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: var(--ink); color: var(--bg); }
.slots { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.slot { display: flex; gap: 8px; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; font-size: 13.5px; }
.slot-k { flex: none; }
.slot-v { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.slot.dinner .slot-v { font-weight: 800; }
.day-thumb { display: none; }
.empty-note { font-size: 13px; font-weight: 700; opacity: .8; }
.mini-suggest { margin-top: 6px; display: inline-flex; padding: 7px 12px; border-radius: 999px; font-weight: 800; font-size: 13px; }

/* open day */
.dx-head { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dx-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dx-done { padding: 7px 12px; border-radius: 999px; font-weight: 800; font-size: 13px; flex: none; }
.dx-slots { display: flex; flex-direction: column; gap: 12px; }
.ms { display: flex; flex-direction: column; gap: 8px; }
.ms-label { font: 700 13px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.mcard { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 12px; align-items: center; width: 100%; padding: 8px; border-radius: 16px; background: var(--surface); color: var(--ink); text-align: left; }
.mcard.big { grid-template-columns: 1fr; padding: 8px; }
.mc-photo { position: relative; display: block; width: 76px; height: 76px; border-radius: 12px; background: var(--img, none) center / cover no-repeat, var(--ph); overflow: hidden; }
.mcard.big .mc-photo { width: 100%; height: 170px; }
.mc-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 2px 4px; }
.mc-title { font: 700 16.5px/1.2 var(--f-display); color: var(--ink-head); }
.mcard.big .mc-title { font-size: 21px; }
.mc-meta { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.mc-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.tag { font: 700 11px/1 var(--f-body); padding: 4px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-soft-ink); white-space: nowrap; }
.mcard.plain { grid-template-columns: 44px minmax(0,1fr); }
.mc-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.mc-icon svg { width: 22px; height: 22px; }
.mcard.emptyc { grid-template-columns: 1fr; padding: 14px; border: 2px dashed var(--line); background: transparent; color: var(--ink-2); font-weight: 700; font-size: 13.5px; }
.ms-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.act { padding: 7px 11px; border-radius: 999px; font-weight: 800; font-size: 12.5px; display: inline-flex; gap: 5px; align-items: center; }
.act svg { width: 14px; height: 14px; }
.ph-letter { position: absolute; inset: 0; display: grid; place-items: center; font: 700 30px/1 var(--f-display); color: var(--t1-ink); opacity: .7; }
.mcard.big .ph-letter { font-size: 56px; }

/* ---------- WARM tiles ---------- */
[data-skin="warm"] .day { --tb: var(--t1); --ti: var(--t1-ink); --td: var(--t1-deep);
  display: grid; grid-template-columns: 58px minmax(0,1fr); align-items: center; gap: 10px; background: var(--tb); color: var(--ti);
  border-radius: 20px; padding: 11px 12px 11px 10px; box-shadow: 0 5px 0 var(--td); margin-bottom: 5px; }
[data-skin="warm"] .day.c2 { --tb: var(--t2); --ti: var(--t2-ink); --td: var(--t2-deep); }
[data-skin="warm"] .day.c3 { --tb: var(--t3); --ti: var(--t3-ink); --td: var(--t3-deep); }
[data-skin="warm"] .day.open { display: block; padding: 14px 12px 14px; }
[data-skin="warm"] .day .day-top { flex-direction: column; align-items: center; gap: 1px; }
[data-skin="warm"] .day-name { font: 700 21px/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; color: var(--ti); }
[data-skin="warm"] .day-date { font: 700 12.5px/1.3 var(--f-body); opacity: .85; }
[data-skin="warm"] .day:not(.open) .dn-long, [data-skin="warm"] .day:not(.open) .dd-long { display: none; }
[data-skin="warm"] .day:not(.open) .dn-short, [data-skin="warm"] .day:not(.open) .dd-short { display: inline; }
[data-skin="warm"] .day .today-pill { position: absolute; top: -9px; right: 14px; margin: 0; background: var(--ink-head); color: var(--bg); }
[data-skin="warm"] .slot { background: var(--pill); border-radius: 10px; padding: 3px 8px 3px 4px; font-weight: 700; }
[data-skin="warm"] .slot-k { font-size: 0; }
[data-skin="warm"] .slot-k::before { content: attr(data-s); font: 700 11px/1 var(--f-display); width: 19px; height: 19px; border-radius: 50%; background: var(--ti); color: var(--tb); display: grid; place-items: center; }
[data-skin="warm"] .slot.none { background: var(--pill-faint); }
[data-skin="warm"] .slot.none .slot-v { opacity: .6; font-weight: 600; }
[data-skin="warm"] .slot.left .slot-v { font-style: italic; }
[data-skin="warm"] .day.empty { --tb: var(--surface); --ti: var(--ink); --td: var(--line); box-shadow: 0 5px 0 var(--td); outline: 2px dashed var(--t2-deep); outline-offset: -2px; }
[data-skin="warm"] .mini-suggest { background: var(--accent); color: var(--accent-ink); box-shadow: 0 3px 0 var(--accent-deep); font-family: var(--f-display); font-weight: 600; }
[data-skin="warm"] .dx-head .day-name { font-size: 24px; }
[data-skin="warm"] .dx-head .day-date { font-size: 14px; }
[data-skin="warm"] .dx-done { background: var(--ti); color: var(--tb); }
[data-skin="warm"] .ms-label { color: var(--ti); font-size: 14px; }
[data-skin="warm"] .mcard { box-shadow: 0 4px 0 var(--td); }
[data-skin="warm"] .mcard.emptyc { border-color: var(--pill); color: var(--ti); opacity: .9; box-shadow: none; }
[data-skin="warm"] .mc-title { color: var(--accent-text); }
[data-skin="warm"] .act { background: var(--pill); color: var(--ti); }
[data-skin="warm"] .act.primary { background: var(--ti); color: var(--tb); }

/* ---------- CLEAN tiles ---------- */
[data-skin="clean"] .day { display: grid; grid-template-columns: 78px minmax(0,1fr); grid-template-rows: auto 1fr; column-gap: 12px; background: var(--surface); border-radius: 18px; padding: 9px;
  box-shadow: 0 1px 2px var(--shadow), 0 6px 16px var(--shadow); }
[data-skin="clean"] .day.today { box-shadow: 0 0 0 2px var(--accent), 0 6px 16px var(--shadow); }
[data-skin="clean"] .day.open { display: block; padding: 14px; }
[data-skin="clean"] .day-thumb { display: block; position: relative; grid-row: 1 / span 2; width: 78px; height: 78px; border-radius: 13px; background: var(--img, none) center / cover no-repeat, var(--ph); overflow: hidden; }
[data-skin="clean"] .day-thumb .ph-letter { font-size: 26px; }
[data-skin="clean"] .day.empty .day-thumb { background: var(--surface-2); border: 1.5px dashed var(--line); }
[data-skin="clean"] .day-top { padding-top: 2px; }
[data-skin="clean"] .day-name { font-size: 14.5px; }
[data-skin="clean"] .day-date { font-size: 12px; color: var(--ink-3); }
[data-skin="clean"] .today-pill { background: var(--accent-soft); color: var(--accent-soft-ink); }
[data-skin="clean"] .slots { margin-top: 4px; gap: 2px; }
[data-skin="clean"] .slot { font-size: 12.8px; color: var(--ink-2); }
[data-skin="clean"] .slot-k { font-size: 0; }
[data-skin="clean"] .slot-k::before { content: attr(data-s); font: 700 9px/1 var(--f-body); color: var(--ink-2); background: var(--surface-2); border-radius: 5px; width: 17px; height: 17px; display: grid; place-items: center; }
[data-skin="clean"] .slot.none .slot-v { color: var(--ink-3); opacity: .7; }
[data-skin="clean"] .slot.left .slot-v { color: var(--accent-text); }
[data-skin="clean"] .slot.dinner .slot-v { color: var(--ink); font-weight: 700; }
[data-skin="clean"] .mini-suggest { background: var(--accent); color: var(--accent-ink); }
[data-skin="clean"] .dx-head .day-name { font-size: 18px; }
[data-skin="clean"] .dx-head .day-date { color: var(--ink-3); }
[data-skin="clean"] .dx-done { background: var(--surface-2); color: var(--accent-text); }
[data-skin="clean"] .ms-label { color: var(--ink-2); font-size: 11.5px; font-weight: 700; }
[data-skin="clean"] .mcard { background: var(--surface-2); }
[data-skin="clean"] .mcard.big { background: var(--surface); padding: 0; overflow: hidden; box-shadow: 0 1px 2px var(--shadow), 0 8px 20px var(--shadow); border: 1px solid var(--line); }
[data-skin="clean"] .mcard.big .mc-photo { border-radius: 0; height: 190px; }
[data-skin="clean"] .mcard.big .mc-body { padding: 4px 14px 14px; }
[data-skin="clean"] .mc-title { letter-spacing: -.01em; }
[data-skin="clean"] .act { background: var(--surface-2); color: var(--ink); }
[data-skin="clean"] .act.primary { background: var(--accent); color: var(--accent-ink); }

/* ---------- CLASSIC tiles ---------- */
[data-skin="classic"] .day, [data-skin="classic"] .rv-card, [data-skin="classic"] .rcard-body, [data-skin="classic"] .sug-card {
  background-color: var(--surface);
  background-image: linear-gradient(var(--rule), var(--rule)), linear-gradient(var(--surface), var(--surface)), repeating-linear-gradient(to bottom, transparent 0 21px, var(--lines) 21px 22px);
  background-size: 100% 2px, 100% 34px, 100% 22px; background-position: 0 34px, 0 0, 0 36px; background-repeat: no-repeat, no-repeat, repeat;
}
[data-skin="classic"] .day { border-radius: 3px; padding: 0 12px 9px; box-shadow: 0 1px 2px var(--shadow), 0 3px 8px var(--shadow); }
[data-skin="classic"] .day:nth-child(odd):not(.open) { transform: rotate(-.45deg); }
[data-skin="classic"] .day:nth-child(even):not(.open) { transform: rotate(.35deg); }
[data-skin="classic"] .day-top { height: 34px; align-items: center; }
[data-skin="classic"] .day-name { font: 700 26px/1 var(--f-display); color: var(--ink-head); }
[data-skin="classic"] .day-date { font: 500 19px/1 var(--f-display); color: var(--ink-2); }
[data-skin="classic"] .today-pill { background: var(--accent); color: var(--accent-ink); }
[data-skin="classic"] .slots { gap: 0; padding-top: 2px; }
[data-skin="classic"] .slot { height: 22px; font-size: 13.8px; }
[data-skin="classic"] .slot-k { width: 66px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); font-weight: 700; }
[data-skin="classic"] .slot.none .slot-v { color: var(--ink-3); }
[data-skin="classic"] .slot.left .slot-v { font-style: italic; color: var(--ink-2); }
[data-skin="classic"] .slot.dinner .slot-v { font-weight: 700; }
[data-skin="classic"] .empty-note { line-height: 22px; font-weight: 400; font-style: italic; color: var(--ink-2); }
[data-skin="classic"] .mini-suggest { margin-top: 4px; border: 1.5px dashed var(--accent); color: var(--accent-text); font: 700 20px/1 var(--f-display); padding: 4px 14px; }
[data-skin="classic"] .day.open { padding-bottom: 14px; }
[data-skin="classic"] .dx-head { height: 34px; margin-bottom: 12px; }
[data-skin="classic"] .dx-done { border: 1.5px solid var(--accent); color: var(--accent-text); font: 700 18px/1 var(--f-display); padding: 3px 12px; background: var(--surface); }
[data-skin="classic"] .ms-label { font: 700 10px/1 var(--f-body); letter-spacing: .12em; color: var(--accent-text); }
[data-skin="classic"] .mcard { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 1px 3px var(--shadow); }
[data-skin="classic"] .mcard.emptyc { background: var(--surface); border: 1.5px dashed var(--line); font-style: italic; font-weight: 400; box-shadow: none; }
[data-skin="classic"] .mc-photo { border-radius: 2px; }
[data-skin="classic"] .mc-title { font-size: 24px; line-height: 1; }
[data-skin="classic"] .mcard.big .mc-title { font-size: 30px; }
[data-skin="classic"] .tag { background: transparent; border: 1px solid var(--accent); color: var(--accent-text); border-radius: 3px; text-transform: uppercase; letter-spacing: .08em; font-size: 9.5px; }
[data-skin="classic"] .act { border: 1.5px solid var(--accent); color: var(--accent-text); background: var(--surface); font: 700 17px/1 var(--f-display); padding: 4px 12px; }
[data-skin="classic"] .act.primary { background: var(--accent); color: var(--accent-ink); }
[data-skin="classic"] .ph-letter { color: var(--ink-head); }

/* ---------- recipe grid ---------- */
.rtools { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 12px; }
.rtools-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.searchbox { position: relative; }
.searchbox svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.searchbox input { padding-left: 38px; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
.rcard { display: flex; flex-direction: column; width: 100%; background: var(--surface); border-radius: var(--r-card); overflow: hidden; text-align: left; color: var(--ink); min-width: 0; }
.rcard-photo { position: relative; display: block; aspect-ratio: 4 / 3; max-width: 100%; background: var(--img, none) center / cover no-repeat, var(--ph); }
.rcard-photo .badge-ex { position: absolute; left: 8px; top: 8px; }
.rcard-photo .star { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--t2-deep); }
.rcard-photo .star svg { width: 16px; height: 16px; }
.rcard-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; flex: 1; }
.rcard-title { font: 700 16px/1.2 var(--f-display); color: var(--ink-head); }
.rcard-meta { font-size: 12px; color: var(--ink-2); font-weight: 600; }
[data-skin="warm"] .rcard { box-shadow: 0 5px 0 var(--line); padding: 7px; }
[data-skin="warm"] .rcard-photo { border-radius: 15px; }
[data-skin="warm"] .rcard-body { padding: 9px 6px 6px; }
[data-skin="warm"] .rcard-title { color: var(--accent-text); font-size: 17px; }
[data-skin="clean"] .rcard { box-shadow: 0 1px 2px var(--shadow), 0 8px 20px var(--shadow); }
[data-skin="clean"] .rcard-title { font-size: 14.5px; letter-spacing: -.01em; }
[data-skin="classic"] .rcard { box-shadow: 0 1px 2px var(--shadow), 0 4px 10px var(--shadow); border-radius: 3px; padding: 8px 8px 0; }
[data-skin="classic"] .rcard-photo { border-radius: 2px; }
[data-skin="classic"] .rcard-body { padding: 0 4px 6px; background-position: 0 34px, 0 0, 0 36px; }
[data-skin="classic"] .rcard-title { font-size: 23px; line-height: 1; height: 34px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; padding-top: 7px; }
[data-skin="classic"] .rcard-meta { line-height: 22px; padding-top: 2px; }
.empty-state { text-align: center; padding: 34px 16px; border: 2px dashed var(--line); border-radius: var(--r-card); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty-state h2 { font: 700 22px/1.2 var(--f-display); }
[data-skin="classic"] .empty-state h2 { font-size: 30px; }
.empty-state p { color: var(--ink-2); max-width: 36ch; }

/* ---------- sheets ---------- */
.sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.sheet-scrim { position: absolute; inset: 0; background: var(--scrim); animation: fade .2s ease-out; }
.sheet-panel { position: relative; width: 100%; max-width: 680px; max-height: 94vh; max-height: 94dvh; background: var(--bg); color: var(--ink); border-radius: 22px 22px 0 0;
  display: flex; flex-direction: column; box-shadow: 0 -10px 40px var(--shadow); animation: up .28s cubic-bezier(.2,.8,.2,1); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1.5px solid var(--line); flex: none; }
.sheet-head h2 { font: 700 18px/1.2 var(--f-display); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-skin="classic"] .sheet-head h2 { font-size: 26px; }
.sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 14px max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 14px; }
.sheet.full .sheet-panel { height: 94vh; height: 94dvh; }
.sheet.instant .sheet-panel, .sheet.instant .sheet-scrim { animation: none; }
@keyframes up { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }

/* recipe view */
.rv { display: flex; flex-direction: column; gap: 14px; }
.rv-photo { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 340px; max-width: 100%; border-radius: 18px; background: var(--img, none) center / cover no-repeat, var(--ph); overflow: hidden; }
.rv-photo .ph-letter { font-size: 80px; }
.rv-card { background: var(--surface); border-radius: var(--r-card); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.rv-title { font: 700 27px/1.1 var(--f-display); color: var(--ink-head); }
.rv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--ink-2); }
.rv-meta b { color: var(--ink); }
.rv-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-sec { font: 700 15px/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--accent-text); margin-top: 6px; }
.rv-ing li, .rv-steps li { cursor: pointer; }
.rv-ing li { padding: 7px 0 7px 28px; position: relative; border-bottom: 1px solid var(--line); }
.rv-ing li::before { content: ""; position: absolute; left: 0; top: 9px; width: 17px; height: 17px; border: 2px solid var(--ink-3); border-radius: 50%; }
.rv-ing li.done::before { background: var(--ok); border-color: var(--ok); }
.rv-steps { counter-reset: s; display: flex; flex-direction: column; gap: 10px; }
.rv-steps li { counter-increment: s; padding-left: 36px; position: relative; line-height: 1.5; }
.rv-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 9px; background: var(--t2); color: var(--t2-ink); font: 700 14px/26px var(--f-display); text-align: center; }
.rv li.done { text-decoration: line-through; color: var(--ink-3); }
.rv-notes { white-space: pre-wrap; }
.rv-foot { display: flex; gap: 8px; flex-wrap: wrap; }
.confirm { background: var(--accent-soft); color: var(--accent-soft-ink); border-radius: var(--r-sm); padding: 12px; display: flex; flex-direction: column; gap: 10px; font-weight: 700; }
.confirm .row { flex-wrap: wrap; }
[data-skin="warm"] .rv-photo { border: 4px solid var(--surface); box-shadow: 0 5px 0 var(--line); }
[data-skin="warm"] .rv-card { box-shadow: 0 5px 0 var(--line); }
[data-skin="warm"] .rv-title { color: var(--accent-text); }
[data-skin="warm"] .rv-ing { display: flex; flex-wrap: wrap; gap: 6px; }
[data-skin="warm"] .rv-ing li { background: var(--surface-2); border: 0; border-radius: 10px; padding: 6px 10px 6px 30px; font-weight: 700; font-size: 14px; }
[data-skin="warm"] .rv-ing li::before { left: 9px; top: 9px; width: 14px; height: 14px; }
[data-skin="warm"] .rv-sec { color: var(--t3-deep); }
[data-skin="clean"] .rv-card { box-shadow: 0 1px 2px var(--shadow), 0 8px 20px var(--shadow); }
[data-skin="clean"] .rv-title { font-size: 24px; letter-spacing: -.02em; }
[data-skin="clean"] .rv-sec { text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 15px; font-weight: 700; }
[data-skin="clean"] .rv-steps li::before { background: var(--ink); color: var(--bg); border-radius: 50%; font-family: var(--f-body); font-size: 12px; }
[data-skin="classic"] .rv-photo { border-radius: 2px; border: 8px solid var(--surface); box-shadow: 0 2px 8px var(--shadow); transform: rotate(-.6deg); }
[data-skin="classic"] .rv-card { border-radius: 3px; padding: 0 16px 16px; gap: 0; box-shadow: 0 1px 2px var(--shadow), 0 4px 12px var(--shadow); background-size: 100% 2px, 100% 56px, 100% 24px; background-position: 0 56px, 0 0, 0 58px;
  background-image: linear-gradient(var(--rule), var(--rule)), linear-gradient(var(--surface), var(--surface)), repeating-linear-gradient(to bottom, transparent 0 23px, var(--lines) 23px 24px); line-height: 24px; }
[data-skin="classic"] .rv-title { font-size: 38px; line-height: 56px; height: 58px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-skin="classic"] .rv-card > * + * { margin-top: 0; }
[data-skin="classic"] .rv-tags { min-height: 24px; align-items: center; padding: 3px 0; }
[data-skin="classic"] .rv-meta { line-height: 24px; gap: 0 16px; }
[data-skin="classic"] .rv-tools { padding: 6px 0; }
[data-skin="classic"] .rv-sec { font: 700 10.5px/24px var(--f-body); letter-spacing: .14em; height: 48px; display: flex; align-items: flex-end; margin: 0; }
[data-skin="classic"] .rv-ing li { border: 0; padding: 0 0 0 18px; line-height: 24px; }
[data-skin="classic"] .rv-ing li::before { content: "–"; border: 0; width: auto; height: auto; top: 0; color: var(--accent-text); border-radius: 0; }
[data-skin="classic"] .rv-ing li.done::before { content: "✓"; background: none; color: var(--ok); }
[data-skin="classic"] .rv-steps { gap: 0; }
[data-skin="classic"] .rv-steps li { line-height: 24px; padding-left: 24px; }
[data-skin="classic"] .rv-steps li::before { content: counter(s) "."; background: none; color: var(--accent-text); font: 700 21px/24px var(--f-display); width: auto; height: auto; text-align: left; }
[data-skin="classic"] .rv-notes { font: 500 21px/24px var(--f-display); color: var(--ink-head); }
[data-skin="classic"] .rv-foot { padding-top: 12px; }

/* editor */
.ed { display: flex; flex-direction: column; gap: 16px; }
.ed-photo { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 12px; align-items: center; }
.ed-photo .prev { width: 96px; height: 96px; border-radius: 14px; background: var(--img, none) center / cover no-repeat, var(--surface-2); border: 1.5px dashed var(--line); }
.ed-photo .btns { display: flex; flex-wrap: wrap; gap: 8px; }
.filebtn { position: relative; overflow: hidden; }
.filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.tagchip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 6px 6px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-soft-ink); font-weight: 700; font-size: 13px; }
.tagchip button { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; line-height: 1; }
.ed-foot { position: sticky; bottom: calc(-24px - env(safe-area-inset-bottom, 0px)); background: var(--bg); padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 8px; border-top: 1.5px solid var(--line); margin-bottom: calc(-24px - env(safe-area-inset-bottom, 0px)); }
.ed-foot .btn { flex: 1; }
.check-row { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.check-row input { width: 20px; height: 20px; accent-color: var(--accent); }

/* suggest */
.sug-res { display: flex; flex-direction: column; gap: 12px; }
.sug-card { background: var(--surface); border-radius: var(--r-card); overflow: hidden; display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 12px; padding: 8px; align-items: center; text-align: left; width: 100%; }
.sug-card .mc-photo { width: 110px; height: 96px; }
.sug-card .sug-meal { font: 800 10.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.sug-note { font-size: 13px; color: var(--ink-2); font-weight: 600; }
[data-skin="warm"] .sug-card { box-shadow: 0 5px 0 var(--line); }
[data-skin="clean"] .sug-card { box-shadow: 0 1px 2px var(--shadow), 0 8px 20px var(--shadow); }
[data-skin="classic"] .sug-card { border-radius: 3px; box-shadow: 0 1px 2px var(--shadow), 0 4px 10px var(--shadow); background-position: 0 200px, 0 0, 0 0; }
.sug-actions { display: flex; gap: 8px; }
.sug-actions .btn { flex: 1; }

/* leftovers list / generic list rows */
.optlist { display: flex; flex-direction: column; gap: 8px; }
.opt { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-sm); background: var(--surface); border: 1.5px solid var(--line); text-align: left; width: 100%; }
.opt b { display: block; color: var(--ink-head); }
.opt span { font-size: 13px; color: var(--ink-2); }

/* shopping list */
.list-tools { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.list-tools .row { flex-wrap: wrap; }
.list-sum { font-weight: 700; color: var(--ink-2); font-size: 13.5px; }
.lgroup { background: var(--surface); border-radius: var(--r-card); padding: 12px 14px; margin-bottom: 12px; }
.lgroup h3 { font: 700 16px/1.2 var(--f-display); color: var(--ink-head); display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.lgroup h3 small { font: 700 12px/1 var(--f-body); color: var(--ink-2); white-space: nowrap; }
[data-skin="classic"] .lgroup h3 { font-size: 24px; }
.litems li { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); min-height: 44px; }
.litems li:last-child { border-bottom: 0; }
.litems label { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 8px 0; cursor: pointer; }
.litems input[type="checkbox"] { width: 22px; height: 22px; flex: none; accent-color: var(--ok); }
.litems .txt { min-width: 0; overflow-wrap: anywhere; }
.litems .src { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.litems li.done .txt { text-decoration: line-through; color: var(--ink-3); }
.litems .x { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); flex: none; font-size: 18px; }
.lnote { color: var(--ink-3); font-size: 13px; font-weight: 600; padding: 6px 0; }
.addrow { margin-top: 8px; }
[data-skin="warm"] .lgroup { box-shadow: 0 5px 0 var(--line); }
[data-skin="clean"] .lgroup { box-shadow: 0 1px 2px var(--shadow), 0 6px 16px var(--shadow); }
[data-skin="classic"] .lgroup { border-radius: 3px; box-shadow: 0 1px 2px var(--shadow), 0 3px 8px var(--shadow); }
.lgroup.extra h3 { color: var(--accent-text); }

/* settings */
.skins { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.skinbtn { border-radius: 14px; border: 2px solid var(--line); padding: 8px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); text-align: left; }
.skinbtn[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.skinbtn .sw { height: 54px; border-radius: 9px; }
.skinbtn b { font-size: 13px; line-height: 1.2; color: var(--ink-head); }
.skinbtn span { font-size: 11.5px; color: var(--ink-2); }
/* swatches are previews of each skin, so they carry that skin's own colors in both themes */
.sw-warm { background: linear-gradient(90deg, #e4572e 0 33%, #f2b233 33% 66%, #7b8b37 66%); }
.sw-clean { background: linear-gradient(135deg, #ffffff 0 55%, #16a34a 55%); border: 1px solid #e5e7eb; }
.sw-classic { background: linear-gradient(#fffcf2 0 40%, #d9534a 40% 44%, #fffcf2 44% 60%, #c6d9ec 60% 62%, #fffcf2 62% 80%, #c6d9ec 80% 82%, #fffcf2 82%); }
.setsec { display: flex; flex-direction: column; gap: 10px; }
.setsec h3 { font: 700 17px/1.2 var(--f-display); }
[data-skin="classic"] .setsec h3 { font-size: 24px; }
.catrow { display: flex; gap: 8px; align-items: center; }
.catrow input { flex: 1; min-width: 0; }
.stat { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-2); font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.stat b { color: var(--danger); }
.stat.ok { background: var(--accent-soft); color: var(--accent-soft-ink); border-color: transparent; }
.stat.ok b { color: inherit; }

/* scan recipe card */
.scan-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.scan-pick .btn svg, .scan-cta .btn svg { width: 18px; height: 18px; flex: none; }
.scan-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.scan-thumb { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-sm); background: var(--img, none) center / cover no-repeat, var(--surface-2); border: 1.5px solid var(--line); overflow: hidden; }
.scan-n { position: absolute; left: 6px; top: 6px; font: 800 11px/1 var(--f-body); padding: 4px 7px; border-radius: 999px; background: var(--ink); color: var(--bg); }
.scan-x { position: absolute; right: 6px; top: 6px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink); font-size: 18px; line-height: 1; box-shadow: 0 1px 4px var(--shadow); }
.scan-empty { border: 2px dashed var(--line); border-radius: var(--r-card); padding: 22px 16px; text-align: center; color: var(--ink-2); font-weight: 700; }
.scan-busy { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-card); background: var(--surface); }
.scan-busy .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.scan-busy b { color: var(--ink-head); }
.spin { width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.scan-note { background: var(--accent-soft); color: var(--accent-soft-ink); border-radius: var(--r-sm); padding: 12px 14px; font-size: 13.5px; display: flex; flex-direction: column; gap: 6px; }
.scan-note ul { list-style: disc; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.scan-note .row { flex-wrap: wrap; margin-top: 4px; }
.scan-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--r-card); border: 1.5px dashed var(--line); background: var(--surface); font-weight: 700; }
.card-strip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; }
.card-strip::-webkit-scrollbar { display: none; }
.card-thumb { flex: none; display: block; width: 84px; height: 84px; border-radius: var(--r-sm); background: var(--img, none) center / cover no-repeat, var(--surface-2); border: 1.5px solid var(--line); }
.card-full { display: block; width: 100%; height: auto; border-radius: var(--r-sm); background: var(--surface-2); }
[data-skin="warm"] .scan-thumb, [data-skin="warm"] .card-thumb { border: 3px solid var(--surface); box-shadow: 0 4px 0 var(--line); }
[data-skin="warm"] .scan-busy { box-shadow: 0 5px 0 var(--line); }
[data-skin="clean"] .scan-busy, [data-skin="clean"] .scan-thumb { box-shadow: 0 1px 2px var(--shadow), 0 6px 16px var(--shadow); }
[data-skin="classic"] .scan-thumb, [data-skin="classic"] .card-thumb { border: 5px solid var(--surface); border-radius: 2px; box-shadow: 0 1px 4px var(--shadow); }
[data-skin="classic"] .card-strip { padding: 3px 2px; }
[data-skin="classic"] .card-thumb { width: 66px; height: 66px; }
[data-skin="classic"] .card-thumb:nth-child(odd), [data-skin="classic"] .scan-thumb:nth-child(odd) { transform: rotate(-1.4deg); }
[data-skin="classic"] .card-thumb:nth-child(even), [data-skin="classic"] .scan-thumb:nth-child(even) { transform: rotate(1.1deg); }
[data-skin="classic"] .scan-busy { border-radius: 3px; box-shadow: 0 1px 2px var(--shadow), 0 3px 8px var(--shadow); }
.seg.split { display: flex; overflow: visible; }
.seg.split button { flex: 1 1 0; white-space: normal; text-align: center; line-height: 1.2; }

/* several recipes per slot + linked recipes */
.mitems { display: flex; flex-direction: column; gap: 8px; }
.mitem { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mitem.rm .mcard:not(.big) .mc-body { padding-right: 30px; }
.mrm { position: absolute; right: 8px; top: 8px; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink); font-size: 18px; line-height: 1; box-shadow: 0 1px 4px var(--shadow); }
.mlinks { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 4px; }
.mlink { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 11px 4px 4px; border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 800; font-size: 12.5px; }
.mlink .lthumb { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--img, none) center / cover no-repeat, var(--ph); }
.mlink .lname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-skin="warm"] .mlink { background: var(--pill); color: var(--ti); }
[data-skin="clean"] .mlink { background: var(--surface-2); }
[data-skin="classic"] .mlink { background: var(--surface); border: 1.5px dashed var(--accent); color: var(--accent-text); font: 700 17px/1 var(--f-display); padding: 3px 11px 3px 3px; }
.slot-more { flex: none; font: 800 10.5px/1 var(--f-body); padding: 3px 6px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
[data-skin="warm"] .slot-more { background: var(--ti); color: var(--tb); }
[data-skin="classic"] .slot-more { background: none; border: 1px solid var(--accent); color: var(--accent-text); border-radius: 3px; padding: 2px 5px; }
.lstrip { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.lstrip::-webkit-scrollbar { display: none; }
.lcard { flex: none; display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 10px; align-items: center; width: 220px; max-width: 78%; padding: 6px 12px 6px 6px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); text-align: left; }
.lc-photo { position: relative; display: block; width: 48px; height: 48px; border-radius: 10px; background: var(--img, none) center / cover no-repeat, var(--ph); overflow: hidden; }
.lc-photo .ph-letter { font-size: 20px; }
.lc-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lc-body b { font: 700 14.5px/1.2 var(--f-display); color: var(--ink-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-body small { font-size: 12px; color: var(--ink-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-skin="warm"] .lc-body b { color: var(--accent-text); }
[data-skin="clean"] .lcard { background: var(--surface); border: 1px solid var(--line); }
[data-skin="classic"] .lstrip { padding: 0; }
[data-skin="classic"] .lcard { height: 48px; padding: 0 10px 0 0; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; box-shadow: 0 1px 3px var(--shadow); }
[data-skin="classic"] .lc-photo { height: 46px; border-radius: 2px 0 0 2px; }
[data-skin="classic"] .lc-body { gap: 0; }
[data-skin="classic"] .lc-body b { font-size: 21px; line-height: 24px; }
[data-skin="classic"] .lc-body small { line-height: 18px; }
.linkrow { display: flex; flex-wrap: wrap; gap: 8px; }
.linkchip { max-width: 100%; }
.linkchip .ln { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug-actions { flex-wrap: wrap; }
.sug-actions .btn { flex: 1 1 140px; }
.btn > svg { width: 18px; height: 18px; flex: none; }

@media (min-width: 720px) {
  .rgrid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
  .sheet { align-items: center; }
  .sheet-panel { border-radius: 22px; max-height: 90vh; }
  .sheet.full .sheet-panel { height: 90vh; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet-panel, .sheet-scrim { animation: none; }
  .toast { transition: none; }
  .spin { animation-duration: 2.4s; }
}

/* ---------- hosted app additions (not in the artifact) ---------- */
/* iOS standalone with black-translucent status bar: keep the header and sheets clear of the notch */
.top { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
@media (max-width: 719px) {
  .sheet-panel { max-height: calc(94dvh - env(safe-area-inset-top, 0px)); }
  .sheet.full .sheet-panel { height: calc(94dvh - env(safe-area-inset-top, 0px)); }
}

/* sign-in, set-your-own-password, not-invited */
input[type="password"] { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border-radius: var(--r-sm); border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); }
.auth { display: flex; justify-content: center; padding: 28px 0 40px; }
.auth-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-card); padding: 22px 18px; }
.auth-title { margin: 0; font: 700 26px/1.15 var(--f-display); color: var(--ink-head); }
.auth-foot { margin: 0; text-align: center; font-size: 13.5px; }
.auth-inline { display: flex; flex-direction: column; gap: 12px; }
.linkbtn { background: none; border: 0; padding: 4px; color: var(--accent-text); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

[hidden] { display: none !important; }

/* Scans inbox (Recipes tab) */
.scan-inbox { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-card); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.scan-inbox h3 { margin: 0; font: 700 16px/1.2 var(--f-display); color: var(--ink-head); }
.scan-inbox h3 small { color: var(--ink-3); font-weight: 600; margin-left: 4px; }
.scan-inbox ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.scan-row { display: flex; align-items: center; gap: 8px; }
.scan-row.confirm { flex-direction: column; align-items: stretch; background: var(--accent-soft); color: var(--accent-soft-ink); border-radius: var(--r-sm); padding: 10px 12px; gap: 8px; font-weight: 700; }
.scan-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 6px 0; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.sr-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); display: grid; place-items: center; flex: none; }
.sr-icon svg { width: 20px; height: 20px; }
.sr-body { display: flex; flex-direction: column; min-width: 0; }
.sr-body .muted { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan-row.s-done .sr-icon { background: var(--accent); color: var(--accent-ink); }
.scan-row.s-failed b { color: var(--danger); }
.scan-row .x { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); flex: none; font-size: 18px; background: none; border: 0; cursor: pointer; }

/* "New version ready, reload" (service worker update) */
.update-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 70;
  background: var(--ink); color: var(--bg); border: 0; border-radius: 999px; padding: 11px 18px; font: 700 14px/1.2 var(--f-display); box-shadow: 0 6px 24px rgba(0,0,0,.25); cursor: pointer; }