:root{
  --bg:#f4f7fb; --card:#fff; --ink:#1b2430; --mute:#6b7788; --line:#e1e7ef;
  --accent:#2f6fdb; --accent-ink:#fff; --soft:#e8f0fd; --ok:#2e9d5b; --bad:#d64545;
  --r:14px; --shadow:0 1px 3px rgba(20,35,60,.08);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#10151c; --card:#19212b; --ink:#e8edf4; --mute:#93a0b2; --line:#2a3542; --accent:#5b93f0; --accent-ink:#0c1420; --soft:#1e2c42; --shadow:none}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding-bottom:env(safe-area-inset-bottom)}
[hidden]{display:none!important}
h1{font-size:1.2rem;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.6rem .7rem;width:100%;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
textarea{resize:vertical;min-height:6rem}
label{display:block;font-size:.85rem;color:var(--mute);margin-bottom:.6rem}
label>input,label>select,label>textarea{margin-top:.25rem;color:var(--ink);font-size:1rem}
button{cursor:pointer;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:.55rem .9rem}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
button.ghost{background:transparent;border-color:transparent;color:var(--accent)}
button.danger{color:var(--bad);border-color:var(--bad);background:transparent}
button.wide{width:100%;padding:.8rem;margin-top:1rem}
button:disabled{opacity:.5}

/* Auth */
.auth{min-height:100dvh;display:grid;place-items:center;padding:1rem}
.auth-card{background:var(--card);border-radius:20px;padding:1.5rem;width:min(100%,380px);box-shadow:var(--shadow);text-align:center}
.auth-card img{border-radius:16px;margin-bottom:.5rem}
.auth-card form{text-align:left;margin-top:1rem}
.auth-card .primary{width:100%;padding:.75rem}
.seg{display:flex;background:var(--bg);border-radius:12px;padding:3px;margin-top:1rem}
.seg button{flex:1;border:0;background:transparent;border-radius:10px}
.seg button.on{background:var(--card);box-shadow:var(--shadow);font-weight:600}
.msg{color:var(--bad);min-height:1.2em;font-size:.9rem;margin:.2rem 0 .6rem}

/* App */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem;padding-top:calc(.6rem + env(safe-area-inset-top));background:var(--card);border-bottom:1px solid var(--line)}
.top h1{display:flex;align-items:center;gap:.4rem;flex:1}
.top img{border-radius:7px}
#who{color:var(--mute);font-size:.9rem}
main{max-width:720px;margin:0 auto;padding:1rem 1rem 6rem}
.tabs{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:6}
.tabs button{flex:1;border:0;background:transparent;border-radius:0;padding:.5rem 0 .6rem;font-size:.75rem;color:var(--mute);display:flex;flex-direction:column;align-items:center}
.tabs button span{font-size:1.4rem;line-height:1.2}
.tabs button.on{color:var(--accent);font-weight:600}

.addrow{display:grid;grid-template-columns:1fr 5rem 4.8rem auto;gap:.4rem}
.addrow input,.addrow select{padding-left:.5rem;padding-right:.4rem}
.sugwrap{position:relative}
.sug{position:absolute;left:0;right:0;top:100%;margin:2px 0 0;padding:0;list-style:none;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.15);z-index:4;overflow:hidden}
.sug li{padding:.55rem .8rem;display:flex;justify-content:space-between;gap:.5rem;cursor:pointer}
.sug li:hover,.sug li.act{background:var(--soft)}
.sug small{color:var(--mute)}
.hint{color:var(--mute);font-size:.85rem;margin:.4rem .2rem}
details{margin:.2rem 0}
summary{cursor:pointer;color:var(--accent);font-size:.9rem;padding:.2rem}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem;margin-top:.5rem}

.chips,.storebar{display:flex;gap:.4rem;overflow-x:auto;padding:.3rem 0;scrollbar-width:none}
.chips::-webkit-scrollbar,.storebar::-webkit-scrollbar{display:none}
.chips:not(:empty){margin-top:.4rem}
.chips button{white-space:nowrap;border-radius:999px;background:var(--soft);border-color:transparent;padding:.35rem .8rem;font-size:.9rem}
.storebar button{white-space:nowrap;border-radius:999px;padding:.3rem .8rem;font-size:.9rem}
.storebar button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

.group{margin-top:1rem}
.group h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mute);margin:0 0 .3rem .3rem}
.list{list-style:none;margin:0;padding:0;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.it{display:flex;align-items:center;gap:.6rem;padding:.2rem .8rem;border-bottom:1px solid var(--line)}
.it:last-child{border-bottom:0}
.it input[type=checkbox]{width:1.35rem;height:1.35rem;flex:none;accent-color:var(--accent)}
.it .nm{flex:1;text-align:left;border:0;background:transparent;padding:.7rem 0;min-width:0}
.it .nm small{display:block;color:var(--mute)}
.it .qty{color:var(--mute);white-space:nowrap;font-variant-numeric:tabular-nums}
.it .by{width:1.4rem;height:1.4rem;border-radius:50%;background:var(--soft);color:var(--accent);font-size:.7rem;display:grid;place-items:center;flex:none}
.it .st{font-size:.7rem;background:var(--bg);border-radius:6px;padding:.1rem .35rem;color:var(--mute)}
.it.done .nm,.it.done .qty{text-decoration:line-through;color:var(--mute)}
.empty{text-align:center;color:var(--mute);padding:2.5rem 1rem}

.bar{display:flex;gap:.5rem;align-items:center;margin-bottom:.8rem}
.weeknav{justify-content:space-between}
.weeknav strong{flex:1;text-align:center}
.cards{display:grid;gap:.6rem}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:.8rem 1rem;text-align:left;border:0;width:100%}
.card h3{margin:0 0 .2rem;font-size:1.05rem}
.card .meta{color:var(--mute);font-size:.85rem}
.tag{display:inline-block;background:var(--soft);color:var(--accent);border-radius:999px;padding:.05rem .55rem;font-size:.75rem;margin:.25rem .25rem 0 0}

.day{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:.6rem;padding:.6rem .8rem}
.day.today{outline:2px solid var(--accent)}
.day h3{margin:0 0 .4rem;font-size:.95rem}
.slot{display:flex;width:100%;gap:.6rem;align-items:center;text-align:left;border:1px dashed var(--line);margin-top:.3rem;padding:.5rem .7rem;background:transparent}
.slot b{width:4.2rem;font-weight:500;color:var(--mute);font-size:.85rem;flex:none}
.slot.filled{border-style:solid;background:var(--soft);border-color:transparent}
.slot .t{flex:1}
.slot .ok{color:var(--ok)}

dialog{border:0;border-radius:18px;padding:0;width:min(94vw,560px);max-height:90dvh;background:var(--card);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(10,16,26,.5)}
.dbox{padding:1.1rem;overflow:auto;max-height:90dvh}
.dbox h2{margin:0 0 .8rem;font-size:1.2rem}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.actions .grow{flex:1}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.ing{margin:.4rem 0 1rem;padding-left:1.1rem}
.ing li{padding:.1rem 0}
.steps{white-space:pre-wrap;background:var(--bg);border-radius:10px;padding:.7rem}
.stepper{display:inline-flex;align-items:center;gap:.5rem;margin:.3rem 0}
.stepper button{padding:.2rem .7rem}
.pick{max-height:34vh;overflow:auto;display:grid;gap:.3rem;margin:.5rem 0}
.pick button{text-align:left}
.pick button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

#toast{position:fixed;left:50%;bottom:5.5rem;transform:translate(-50%,20px);background:#1b2430;color:#fff;padding:.6rem 1rem;border-radius:12px;opacity:0;pointer-events:none;transition:.25s;z-index:20;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast.err{background:var(--bad)}

@media (max-width:420px){.addrow{grid-template-columns:1fr 4.6rem 4.4rem auto}}

.budget{background:var(--soft);border-radius:var(--r);padding:.55rem .85rem;margin:.2rem 0 .7rem;font-size:.9rem;display:flex;flex-wrap:wrap;gap:.2rem .9rem}
.budget b{font-weight:600}
.budget.over b.cost{color:var(--bad)}
.slot small{color:var(--mute)}
.slotrow{display:flex;gap:.3rem;align-items:stretch}
.slotrow .slot{flex:1;min-width:0}
.swap{margin-top:.3rem;flex:none;width:2.6rem;padding:0;font-size:1.05rem;background:transparent}
.swap:disabled{opacity:.4}

.listtools{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.6rem 0 .3rem}
.seg2{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seg2 button{border:0;border-radius:0;background:transparent;padding:.35rem .8rem;font-size:.85rem}
.seg2 button.on{background:var(--accent);color:var(--accent-ink)}
.group h2 .sub{float:right;font-weight:400;font-size:.8rem;color:var(--mute)}
.pr{font-size:.85rem;margin-left:.4rem;white-space:nowrap}
.pr.act{color:var(--ok);font-weight:600}
.pr.none{color:var(--mute)}
.nm small{display:block;color:var(--mute);font-size:.75rem}
.budget.note{background:transparent;border:1px dashed var(--line)}
.pantry{list-style:none;padding:0;margin:.4rem 0;max-height:40vh;overflow:auto}
.pantry li{display:flex;justify-content:space-between;align-items:center;padding:.25rem 0;border-bottom:1px solid var(--line)}
.pantry button{border:0;background:transparent;color:var(--bad)}
.rrow{display:grid;grid-template-columns:3.6rem 1fr 1fr;gap:.2rem .6rem;align-items:center;margin:.5rem 0;padding-bottom:.4rem;border-bottom:1px solid var(--line)}
.rrow select{grid-column:2 / 4}
.chk{display:flex;gap:.3rem;align-items:center;font-size:.9rem}

.or{text-align:center;color:var(--mute);margin:.6rem 0;font-size:.85rem}
.filebtn{display:block;text-align:center;padding:.8rem;border:1px dashed var(--accent);border-radius:var(--r);color:var(--accent);cursor:pointer;font-weight:600}