:root { --ink:#18392b; --green:#2f6c4f; --mint:#dce9dd; --cream:#f5f3ed; --card:#fff; --muted:#748078; --line:#e3e5df; --danger:#a33c34; color-scheme:light; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--cream); color:var(--ink); min-height:100vh; padding-bottom:88px; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.topbar { padding:max(18px, env(safe-area-inset-top)) 20px 14px; display:flex; align-items:center; justify-content:space-between; background:var(--ink); color:#fff; }
h1,h2,p { margin:0; } h1 { font:700 28px/1.1 Georgia,serif; } h2 { font:700 26px/1.1 Georgia,serif; }
.eyebrow { font-size:10px; font-weight:800; letter-spacing:.16em; opacity:.7; margin-bottom:5px; }
.icon-button,.close { border:0; background:rgba(255,255,255,.12); color:inherit; width:42px; height:42px; border-radius:50%; font-size:24px; }
main { max-width:720px; margin:auto; }
.view { display:none; padding:18px 16px; } .view.active { display:block; }
.week-nav { display:flex; align-items:center; justify-content:space-between; text-align:center; margin-bottom:16px; }
.week-nav .icon-button { background:#fff; color:var(--ink); box-shadow:0 2px 10px #18392b16; }
.week-nav small { display:block; color:var(--muted); margin-top:3px; }
.week-grid { display:grid; gap:9px; }
.day-card { border:1px solid var(--line); background:var(--card); border-radius:16px; padding:15px; display:grid; grid-template-columns:54px 1fr auto; align-items:center; text-align:left; color:inherit; box-shadow:0 3px 14px #18392b0b; }
.day-card.today { border-color:var(--green); box-shadow:0 0 0 1px var(--green); }
.day-name { font-weight:800; text-transform:uppercase; font-size:12px; letter-spacing:.08em; }
.day-number { display:block; font:700 24px Georgia,serif; }
.meal-name { font-weight:700; } .meal-note,.muted { color:var(--muted); font-size:13px; margin-top:3px; }
.match { background:var(--mint); color:var(--green); padding:5px 8px; border-radius:999px; font-size:11px; font-weight:800; }
.section-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.primary { border:0; background:var(--green); color:#fff; font-weight:750; border-radius:11px; padding:12px 16px; }
.primary.compact { padding:9px 12px; font-size:13px; } .primary.full { width:100%; margin-top:8px; }
.search { background:#fff; border:1px solid var(--line); border-radius:12px; padding:0 12px; display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.search input { border:0; padding:13px 0; width:100%; outline:0; }
.source-browse { width:100%; display:grid; grid-template-columns:38px 1fr auto; gap:10px; align-items:center; margin:-3px 0 12px; padding:11px 13px; border:1px solid #d8e5da; border-radius:13px; background:#f0f6f0; color:var(--ink); text-align:left; text-decoration:none; }.source-mark { display:grid; place-items:center; width:35px; height:35px; border-radius:50%; background:var(--green); color:#fff; font:700 18px Georgia,serif; }.source-browse b { display:block; font-size:13px; }.source-browse small { display:block; margin-top:2px; color:var(--muted); font-size:10px; }.source-arrow { color:var(--green); font-size:20px; transition:transform .2s; }.source-browse[aria-expanded="true"] .source-arrow { transform:rotate(180deg); }
.arla-browser { margin:-4px 0 16px; padding:14px; border:1px solid #d8e5da; border-radius:14px; background:#f8fbf8; }.arla-search label { margin:0 0 8px; }.arla-search .quick-add { margin-bottom:8px; }.browse-status { min-height:18px; color:var(--muted); font-size:12px; margin:5px 2px 10px; }.arla-results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.arla-result { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:13px; background:#fff; }.arla-result>a { display:block; color:var(--ink); text-decoration:none; }.arla-result-image { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--mint); color:var(--green); font-size:28px; }.arla-result-image img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }.arla-result-body { padding:9px; }.arla-result h3 { min-height:34px; margin:0 0 4px; font-size:13px; line-height:1.25; }.arla-result p { min-height:16px; color:var(--muted); font-size:11px; }.arla-save { width:calc(100% - 18px); margin:0 9px 9px; padding:8px; border:0; border-radius:9px; background:var(--green); color:#fff; font-size:12px; font-weight:750; }.arla-save:disabled { background:var(--mint); color:var(--green); }.load-more { display:block; width:100%; margin-top:12px; }.load-more[hidden] { display:none; }
.recipe-source-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; margin-bottom:13px; border-radius:11px; background:var(--mint); }.recipe-source-tabs button { border:0; border-radius:8px; padding:8px; background:transparent; color:var(--green); font-weight:700; }.recipe-source-tabs button.active { background:#fff; box-shadow:0 2px 7px #18392b18; }
.card-list { display:grid; gap:10px; }
.list-card { background:#fff; border:1px solid var(--line); border-radius:15px; padding:10px; display:grid; grid-template-columns:1fr 76px; gap:12px; align-items:start; overflow:hidden; }
.list-card h3 { margin:0 0 4px; font-size:16px; }.list-card p { color:var(--muted); font-size:13px; }
.recipe-card-actions { width:76px; display:grid; gap:6px; }
.recipe-card-image { position:relative; width:76px; height:66px; padding:0; border:0; border-radius:11px; overflow:hidden; display:grid; place-items:center; background:var(--mint); color:var(--green); font-size:25px; }
.recipe-card-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.recipe-delete { width:100%; border:0; border-radius:8px; padding:6px 4px; background:#fff0ed; color:var(--danger); font-size:11px; font-weight:750; }.recipe-delete:disabled { opacity:.55; }
.recipe-card-add { margin-top:9px; border:0; border-radius:8px; padding:8px 10px; background:var(--mint); color:var(--green); font-size:12px; font-weight:800; text-align:left; }.recipe-card-add:disabled { opacity:.5; }
.ingredient-choices { display:grid; gap:7px; margin:16px 0; max-height:52vh; overflow-y:auto; }.ingredient-choice { display:flex; align-items:center; gap:11px; margin:0; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--cream); font-size:14px; font-weight:500; }.ingredient-choice input { width:20px; height:20px; flex:none; accent-color:var(--green); }.ingredient-choice span { overflow-wrap:anywhere; }
.expiry { padding:11px 13px; background:#fff0d2; color:#744e00; border-radius:12px; margin-bottom:12px; font-size:13px; }
.pantry-cabinet { --wood:#b98d60; position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:0 14px; padding:15px 13px 19px; background:linear-gradient(90deg,#e9e5dc 0 2%,#fff 2% 49%,#ddd8cf 49% 51%,#fff 51% 98%,#e9e5dc 98%); border:6px solid #f8f7f3; border-radius:5px; box-shadow:0 8px 28px #503c2724,inset 0 0 18px #7a694b12; overflow:hidden; }
.pantry-cabinet:before { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 7px 0 12px #5c493018,inset -7px 0 12px #5c493018; }
.pantry-shelf { position:relative; min-width:0; padding:28px 5px 16px; display:flex; align-items:end; border-bottom:9px solid #f2efe8; box-shadow:0 5px 0 -1px var(--wood),0 9px 9px -8px #3a2919; min-height:210px; }
.shelf-label { position:absolute; top:11px; left:8px; color:#8a857d; font-size:9px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.pantry-items { width:100%; display:flex; align-items:end; justify-content:center; gap:5px; min-width:0; }
.pantry-product { position:relative; width:min(92px,31%); min-width:0; text-align:center; color:var(--ink); }
.product-visual { position:relative; height:103px; display:flex; align-items:end; justify-content:center; filter:drop-shadow(0 5px 4px #312a2025); }
.product-visual img { display:block; max-width:100%; width:auto; max-height:100%; object-fit:contain; }
.generic-jar { width:62px; height:76px; display:grid; place-items:center; border:2px solid #c8c4ba; border-radius:8px 8px 15px 15px; background:linear-gradient(145deg,#fff,#e8e4db); position:relative; }
.generic-jar:before { content:""; position:absolute; height:9px; left:-3px; right:-3px; top:-7px; background:#3c423f; border-radius:5px; }.generic-jar span { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--mint); color:var(--green); font:700 17px Georgia,serif; }
.pantry-product h3 { font-size:10px; line-height:1.15; height:24px; margin:8px 0 1px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.pantry-product p { color:var(--muted); font-size:9px; }
.expiry-sticker { position:absolute; right:-2px; top:0; border-radius:999px; padding:3px 5px; background:#e9a546; color:#fff; font-size:8px; font-weight:800; box-shadow:0 2px 5px #0002; }.expiring-product h3 { color:#8d4d17; }
.product-controls { display:flex; justify-content:center; gap:3px; margin-top:6px; opacity:.15; transition:.18s; }.pantry-product:hover .product-controls,.pantry-product:focus-within .product-controls { opacity:1; }.product-controls button { border:0; width:25px; height:24px; border-radius:7px; background:#ebe9e2; color:var(--ink); font-weight:800; padding:0; }.product-controls .remove-product { color:var(--danger); }
.empty-cabinet .pantry-shelf { min-height:160px; }.empty-cabinet .pantry-items p { color:#aaa59d; font-size:11px; margin-bottom:25px; }
.row-actions { display:flex; gap:7px; align-items:center; }.mini { border:0; border-radius:9px; padding:7px 9px; background:var(--cream); color:var(--ink); }
.quick-add { display:grid; grid-template-columns:1fr auto; gap:7px; margin:0 0 16px; }.quick-add input { margin:0; }.quick-add button { width:45px; padding:0; font-size:21px; }
.shopping-list { display:grid; gap:16px; }.shopping-group { display:grid; gap:7px; }.shopping-group-heading { display:flex; justify-content:space-between; align-items:end; padding:0 4px; }.shopping-group-heading span { color:var(--green); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.shopping-group-heading h3 { margin:2px 0 0; font:700 18px Georgia,serif; }.shopping-group-heading>small { color:var(--muted); font-size:11px; }.shopping-row { background:#fff; border:1px solid var(--line); border-radius:12px; padding:13px; display:flex; gap:10px; align-items:center; }
.shopping-row.checked { opacity:.55; }.shopping-row.checked .shopping-check span { text-decoration:line-through; }.shopping-row input { width:22px; height:22px; flex:none; accent-color:var(--green); }
.shopping-check { display:flex; align-items:center; gap:12px; flex:1; min-width:0; margin:0; font-size:16px; }.shopping-check span { overflow-wrap:anywhere; }.shopping-item-text { display:grid; gap:2px; }.shopping-item-text small { color:var(--muted); font-size:12px; font-weight:500; }
.shopping-row>button { border:0; width:32px; height:32px; flex:none; border-radius:50%; background:var(--cream); color:var(--muted); font-size:20px; }.shopping-row .shopping-edit { width:auto; padding:0 8px; border-radius:8px; color:var(--green); font-size:12px; font-weight:800; }
.shopping-add { grid-template-columns:minmax(0,1fr) 45px; }.shopping-add #shoppingName { grid-column:1/-1; }.shopping-add #shoppingQuantity { grid-column:1; }.shopping-add button { grid-column:2; }
.shopping-add input { min-width:0; width:100%; border:1px solid var(--line); border-radius:11px; padding:12px; background:#fff; }
.shopping-count { color:var(--green); font-weight:800; white-space:nowrap; }
.bottom-nav { position:fixed; z-index:10; inset:auto 0 0; background:#fff; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); padding:7px 6px max(7px,env(safe-area-inset-bottom)); }
.bottom-nav button { border:0; background:transparent; color:var(--muted); display:grid; gap:2px; place-items:center; font-size:11px; font-weight:700; }.bottom-nav button span { font-size:21px; }.bottom-nav button.active { color:var(--green); }
dialog { border:0; border-radius:22px 22px 0 0; width:min(100%,620px); max-height:92vh; margin:auto auto 0; padding:0; background:#fff; color:var(--ink); box-shadow:0 -8px 35px #0003; }
dialog::backdrop { background:#0d2119a8; backdrop-filter:blur(2px); } dialog form { padding:22px 18px max(22px,env(safe-area-inset-bottom)); overflow:auto; max-height:92vh; }
.image-dialog { position:relative; width:min(96vw,900px); max-height:96vh; margin:auto; padding:0; border-radius:18px; background:#0b0e0c; overflow:visible; }.image-dialog img { display:block; width:100%; max-height:92vh; border-radius:18px; object-fit:contain; }.image-close { position:absolute; z-index:2; top:10px; right:10px; background:#101512c7; color:#fff; }
.dialog-heading { display:flex; justify-content:space-between; align-items:start; margin-bottom:18px; }.close { background:var(--cream); color:var(--ink); }
label { display:block; font-weight:700; font-size:13px; margin:13px 0; } label small,.hint { display:block; color:var(--muted); font-weight:400; font-size:12px; margin-top:4px; }
input,select,textarea { width:100%; border:1px solid #ccd1ca; border-radius:10px; padding:11px; background:#fff; color:var(--ink); margin-top:6px; }
textarea { resize:vertical; }.two-columns { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.inline-field { display:grid; grid-template-columns:1fr auto; gap:6px; }.inline-field button { border:0; border-radius:10px; align-self:end; height:42px; background:var(--mint); color:var(--green); font-weight:700; }
.dialog-actions { display:flex; justify-content:space-between; align-items:center; margin-top:12px; }.ghost { border:0; background:var(--cream); color:var(--ink); border-radius:10px; padding:10px 13px; }.danger { color:var(--danger); }
.segmented { display:grid; grid-template-columns:1fr 1fr; background:var(--cream); padding:4px; border-radius:12px; margin-bottom:15px; }.segmented button { border:0; padding:9px; background:transparent; border-radius:9px; }.segmented button.active { background:#fff; box-shadow:0 2px 7px #0001; font-weight:700; }
.product-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.action-tile { min-width:0; border:1px solid var(--line); background:var(--cream); border-radius:13px; padding:11px 9px; display:grid; gap:2px; text-align:left; color:var(--ink); }.action-tile span { font:700 20px Georgia,serif; }.action-tile b { font-size:12px; }.action-tile small { color:var(--muted); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.citygross-tile span { color:#0072bb; letter-spacing:-.08em; }
.capture-input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:.001; pointer-events:none; }
.scan-status { margin:12px 0; padding:11px 13px; border-radius:11px; background:#eef5ef; color:var(--green); font-size:13px; font-weight:650; }.scan-status.error { background:#fff0ed; color:var(--danger); }.scan-status.busy:before { content:""; display:inline-block; width:11px; height:11px; margin-right:8px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-2px; animation:scan-spin .8s linear infinite; }@keyframes scan-spin { to { transform:rotate(360deg); } }
#scanner { background:#111; border-radius:14px; padding:10px; text-align:center; color:#fff; margin:12px 0; }#scanner video { width:100%; border-radius:9px; max-height:280px; }#scanner p { margin:7px; font-size:13px; }
#toast { position:fixed; z-index:40; left:50%; bottom:92px; transform:translate(-50%,20px); background:var(--ink); color:white; padding:11px 16px; border-radius:999px; opacity:0; pointer-events:none; transition:.2s; white-space:nowrap; max-width:90vw; overflow:hidden; text-overflow:ellipsis; }#toast.show { opacity:1; transform:translate(-50%,0); }
.empty { text-align:center; color:var(--muted); padding:38px 20px; background:#ffffff80; border-radius:16px; }
.settings-backup { border-top:1px solid var(--line); padding:18px 18px max(22px,env(safe-area-inset-bottom)); }
.settings-backup h3 { margin:0 0 5px; font:700 18px Georgia,serif; }
.settings-backup p,.login-intro { color:var(--muted); font-size:13px; line-height:1.5; margin:0 0 14px; }
.settings-backup .ghost,.import-label { display:block; width:100%; text-align:center; margin:10px 0; }
.import-label { border:1px solid var(--line); border-radius:10px; padding:11px; }
.import-label input { font-size:12px; }
.login-dialog { margin:auto; border-radius:22px; width:min(92vw,420px); }
.login-error { color:var(--danger); font-size:13px; min-height:18px; }
#settingsDialog { overflow-y:auto; }
#settingsDialog form { max-height:none; }
#accountForm { padding:0; overflow:visible; }
.account-list { display:grid; gap:7px; margin:12px 0; }
.account-list p { margin:0; }
.account-row { display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--cream); font-size:13px; font-weight:700; }
.account-row small { color:var(--muted); font-weight:400; }
@media(max-width:420px){ .pantry-cabinet { gap:0 8px; padding-inline:8px; }.pantry-shelf { min-height:190px; }.product-visual { height:92px; }.product-controls { opacity:1; }}
@media(min-width:700px){ dialog { margin:auto; border-radius:22px; }.week-grid { grid-template-columns:1fr 1fr; }.day-card:last-child { grid-column:1/-1; }.bottom-nav { left:50%; transform:translateX(-50%); max-width:720px; border-radius:18px 18px 0 0; }.topbar>div,.topbar>.icon-button { position:relative; left:50%; transform:translateX(-360px); }.topbar>.icon-button { left:auto; right:50%; transform:translateX(360px); }.pantry-shelf { min-height:250px; }.product-visual { height:140px; }}