:root {
  color-scheme: only light;
  --bg: #fffefa;
  --card: #ffffff;
  --ink: #2b281f;
  --muted: #5f5a4e;
  --line: #ded6c5;
  --primary: #5f9558;
  --primary-ink: #fff;
  --soft: #f5f9ee;
  --danger: #b85c4b;
  --shadow: 0 10px 24px rgba(85, 98, 64, 0.07);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif; background: linear-gradient(180deg,#fff 0%,var(--bg) 60%); color: var(--ink); }
.app-header { position: sticky; top: 0; z-index: 5; padding: max(16px, env(safe-area-inset-top)) 16px 12px; display:flex; justify-content:space-between; align-items:center; background: color-mix(in srgb,#fff 92%,transparent); backdrop-filter: blur(16px); border-bottom:1px solid var(--line); }
h1 { margin:0; font-size:1.55rem; letter-spacing:-.03em; display:flex; align-items:center; gap:7px; }
h2 { margin:0; font-size:1.05rem; display:flex; align-items:center; }
h3 { margin:0; font-size:.98rem; }
.eyebrow,.sub,.hint { color:var(--muted); }
.eyebrow { margin:0 0 2px; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; }
.sub { margin:3px 0 0; font-size:.86rem; }
main { width:min(560px,100%); margin:0 auto; padding:12px 12px calc(24px + env(safe-area-inset-bottom)); }
.tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; position:sticky; top:76px; z-index:4; }
.tab { min-height:44px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--muted); font-weight:800; }
.tab.active { background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 6px 14px color-mix(in srgb,var(--primary) 22%,transparent); }
.card { background:var(--card); border:1px solid var(--line); border-radius:26px; padding:14px; margin-bottom:12px; box-shadow:var(--shadow); }
.add-card { display:grid; gap:12px; }
.compact-add { margin:2px 0 14px; padding:12px; border:1px dashed var(--line); border-radius:20px; background:color-mix(in srgb,#fff 78%,var(--soft)); }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.round-add { min-height:38px; width:38px; padding:0; display:grid; place-items:center; border-radius:999px; background:var(--primary); color:#fff; box-shadow:0 6px 14px color-mix(in srgb,var(--primary) 22%,transparent); }
.round-add svg { width:19px; height:19px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (max-width:420px){ .grid2 { grid-template-columns:1fr; } .tabs{top:72px;} }
label { display:grid; gap:7px; font-size:.92rem; font-weight:750; }
input,button { font:inherit; border-radius:16px; }
input,textarea { width:100%; min-height:48px; border:1px solid var(--line); background:color-mix(in srgb,#fff 88%,var(--soft)); color:var(--ink); padding:12px 13px; font-size:16px; }
textarea { resize:vertical; line-height:1.45; }
button { min-height:46px; border:0; padding:11px 13px; font-weight:850; cursor:pointer; touch-action:manipulation; }
.primary { background:var(--primary); color:var(--primary-ink); }
.secondary,.ghost { color:var(--primary); background:color-mix(in srgb,var(--primary) 10%,transparent); }
.danger { color:var(--danger); background:color-mix(in srgb,var(--danger) 10%,transparent); }
.big { width:100%; }
.small { min-height:38px; padding:8px 11px; border-radius:999px; font-size:.86rem; }
.hidden { display:none !important; }
.actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.actions.compact { margin-top:0; }
.photo-tile { min-height:112px; border:2px dashed var(--line); border-radius:22px; place-items:center; text-align:center; padding:13px; color:var(--muted); background:color-mix(in srgb,#fff 74%,var(--soft)); }
.photo-tile input { position:absolute; inline-size:1px; block-size:1px; opacity:0; pointer-events:none; }
.preview { width:100%; margin-top:8px; }
.preview img { max-width:100%; max-height:220px; border-radius:16px; display:block; margin:auto; }
.items { display:grid; gap:9px; }
.item { display:grid; grid-template-columns:1fr auto auto auto; gap:8px; align-items:center; border:1px solid var(--line); border-radius:18px; padding:10px; background:color-mix(in srgb,#fff 86%,var(--soft)); }
.item.low { border-color:color-mix(in srgb,var(--danger) 45%,var(--line)); }
.item-main { min-width:0; }
.itemName { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.itemMeta { margin:3px 0 0; color:var(--muted); font-size:.84rem; line-height:1.35; }
.stepper { display:grid; grid-template-columns:36px minmax(42px,auto) 36px; align-items:center; gap:4px; }
.stepper button,.delete,.toBuy { min-height:36px; width:36px; padding:0; display:grid; place-items:center; background:#fff; color:var(--primary); border:1px solid var(--line); }
.delete { color:var(--danger); }
.toBuy { color:var(--primary); }
.qty { text-align:center; font-weight:900; }
svg { stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.heading-icon { width:21px; height:21px; color:var(--primary); }
.button-icon { width:17px; height:17px; vertical-align:-3px; margin-right:6px; }
.tile-icon { width:28px; height:28px; margin-bottom:6px; color:var(--primary); display:block; }
.stepper svg,.delete svg,.toBuy svg { width:18px; height:18px; }
.quick-foods { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; }
.quick-foods button { min-height:38px; white-space:nowrap; border-radius:999px; color:var(--primary); background:color-mix(in srgb,var(--primary) 9%,transparent); padding:8px 12px; }
.bulk-box { border-top:1px solid var(--line); padding-top:10px; }
.bulk-box summary { color:var(--primary); font-weight:850; cursor:pointer; }
.bulk-box textarea { margin:8px 0; }
.complete-box { margin-top:12px; }
.small-photo { min-height:88px; margin:10px 0; }