#splash{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;gap:14px;transition:opacity .5s ease}
#splash img{width:200px;height:auto}
#splash p{font-family:'Fraunces',serif;font-weight:300;font-style:italic;font-size:16px;color:var(--mu);letter-spacing:.02em}
#splash.fade{opacity:0;pointer-events:none}
:root{--bg:#FAF7F2;--sf:#FFF;--sf2:#F3EFE8;--ac:#D4622A;--acs:#FAEADE;--gr:#3A6B3F;--grs:#E3EEE4;--tx:#1C1A17;--mu:#7A756C;--bd:rgba(28,26,23,0.1);--r:16px}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--bg);color:var(--tx);font-family:'DM Sans',sans-serif;font-size:15px;overflow:hidden}
#app{display:flex;flex-direction:column;height:100%;max-width:480px;margin:0 auto}
.screen{display:none;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:80px}
.screen.active{display:flex;flex-direction:column}
::-webkit-scrollbar{display:none}
.top-bar{padding:12px 20px 6px;background:var(--bg);position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center}
.top-bar-titles{display:flex;flex-direction:column}
.top-bar-wordmark{height:30px;width:auto;display:block}
.top-bar p{font-size:12px;color:var(--mu);margin-top:3px}
.top-bar-logo{height:36px;width:auto;flex-shrink:0;opacity:.92}
.nav{flex-shrink:0;background:var(--sf);border-top:1px solid var(--bd);display:flex;padding-bottom:env(safe-area-inset-bottom,0px)}
.nb{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px;background:none;border:none;cursor:pointer;color:var(--mu);font-size:10px;font-family:'DM Sans',sans-serif}
.nb.active{color:var(--ac)}
.nb svg{width:22px;height:22px;stroke-width:1.6}
.card{background:var(--sf);border-radius:var(--r);border:1px solid var(--bd);overflow:hidden}
.gbtn{display:flex;align-items:center;gap:6px;background:var(--ac);color:white;border:none;border-radius:20px;padding:7px 14px;font-size:13px;font-family:'DM Sans',sans-serif;cursor:pointer;font-weight:500}
.gbtn svg{width:14px;height:14px;stroke:white}
.bcard{margin:0 16px 12px;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:14px 16px;display:flex;align-items:center;gap:14px}
.bm{flex:1}.bl{font-size:11px;color:var(--mu);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.ba{font-family:'Fraunces',serif;font-weight:300;font-size:24px}.ba em{font-style:italic;color:var(--ac)}
.bs{font-size:12px;color:var(--mu);margin-top:1px}.bb{flex:1;display:flex;flex-direction:column;gap:4px}
.br{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--mu)}
.br span:first-child{width:26px}.bbg{flex:1;height:4px;background:var(--sf2);border-radius:2px;overflow:hidden}
.bbf{height:100%;border-radius:2px;background:var(--ac)}.br .bkr{width:28px;text-align:right}
.dsw{display:flex;align-items:center;justify-content:space-between;padding:8px 20px 6px}
.ds{display:flex;gap:6px}
.dp{width:33px;height:33px;border-radius:50%;border:1.5px solid var(--bd);background:none;cursor:pointer;font-size:13px;font-weight:500;color:var(--mu);font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center}
.dp.active{background:var(--ac);color:white;border-color:var(--ac)}
.spill{border:1.5px solid var(--bd);background:none;cursor:pointer;font-size:13px;font-weight:500;color:var(--tx);font-family:'DM Sans',sans-serif;border-radius:20px;padding:7px 14px;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.spill.active{background:var(--ac);color:white;border-color:var(--ac)}
.sgrp{background:var(--sf);border:1px solid var(--bd);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.slab{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.07em;color:var(--mu);margin-bottom:8px}
.dr{display:grid;grid-template-columns:50px 1fr auto auto auto;align-items:center;padding:11px 16px;gap:6px;border-bottom:1px solid var(--bd)}
.dr:last-child{border-bottom:none}
.dl{font-size:11px;color:var(--mu);font-weight:500}.dt .dl{color:var(--ac)}
.mt{font-size:14px;line-height:1.3;cursor:pointer}.mp{font-size:12px;color:var(--gr);font-weight:500;white-space:nowrap}
.sb{background:none;border:none;cursor:pointer;color:var(--mu);padding:4px;border-radius:8px;display:flex;align-items:center}
.sb svg{width:15px;height:15px;stroke-width:2}
.em{color:var(--mu);font-style:italic;font-size:13px}
.star-btn{background:none;border:none;cursor:pointer;padding:3px;font-size:16px;line-height:1}
.lt{padding:0 16px 8px;display:flex;align-items:center;justify-content:space-between}
.lt h2{font-family:'Fraunces',serif;font-weight:300;font-size:20px}
.cb{font-size:13px;color:var(--mu);background:none;border:none;cursor:pointer;font-family:'DM Sans',sans-serif}
.lar{display:flex;gap:8px;padding:0 16px 12px}
.lab{background:var(--ac);color:white;border:none;border-radius:12px;width:42px;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.alb{margin:10px 16px 0;display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 32px);background:var(--grs);color:var(--gr);border:none;border-radius:12px;padding:13px;font-size:14px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif}
.syn{margin:10px 16px 0;background:var(--acs);border-radius:12px;padding:11px 14px;display:flex;gap:10px;align-items:flex-start}
.syn p{font-size:13px;color:var(--ac);line-height:1.5}
.share-bar{display:flex;gap:8px;padding:8px 16px 4px}
.share-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--sf2);border:none;border-radius:12px;padding:11px;font-size:13px;cursor:pointer;font-family:'DM Sans',sans-serif;color:var(--tx)}
.store-row{display:flex;gap:6px;padding:6px 16px 10px;flex-wrap:wrap}
.store-pill{background:none;border:1.5px solid var(--bd);border-radius:20px;padding:5px 12px;font-size:12px;cursor:pointer;color:var(--mu);font-family:'DM Sans',sans-serif}
.store-pill.active{background:var(--ac);color:white;border-color:var(--ac)}
.lch{padding:12px 16px 4px;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.07em;color:var(--mu);display:flex;align-items:center;gap:6px}
.li{display:flex;flex-direction:column;padding:10px 16px;border-bottom:1px solid var(--bd)}
.li:last-child{border-bottom:none}
.lim{display:flex;align-items:center;gap:10px}
.lck{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--bd);background:none;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.li.done .lck{background:var(--gr);border-color:var(--gr)}
.li.done .lck::after{content:'';display:block;width:6px;height:10px;border:2px solid white;border-top:none;border-left:none;transform:rotate(45deg) translateY(-2px)}
.li.done .in{text-decoration:line-through;color:var(--mu)}
.in{flex:1;font-size:14px}.iq{font-size:12px;color:var(--mu)}
.ip{font-size:12px;color:var(--gr);font-weight:500;white-space:nowrap}
.id{background:none;border:none;color:var(--mu);cursor:pointer;font-size:18px;padding:2px 4px;opacity:.5}
.iui{margin-left:32px;margin-top:3px;display:flex;flex-wrap:wrap;gap:4px}
.ut{font-size:11px;padding:2px 7px;border-radius:8px;background:var(--sf2);color:var(--mu)}
.ut.mx{background:var(--acs);color:var(--ac);font-weight:500}
.sd{width:6px;height:6px;border-radius:50%;background:var(--ac);flex-shrink:0;margin-right:-2px}
.ltr{margin:8px 16px 16px;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--sf);border:1px solid var(--bd);border-radius:12px;font-size:14px}
.filter-row{display:flex;gap:6px;padding:4px 16px 10px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.filter-row::-webkit-scrollbar{display:none}
.fpill{background:none;border:1.5px solid var(--bd);border-radius:20px;padding:5px 12px;font-size:12px;cursor:pointer;color:var(--mu);font-family:'DM Sans',sans-serif;white-space:nowrap;flex-shrink:0}
.fpill.active{background:var(--tx);color:white;border-color:var(--tx)}
.fav-empty{padding:40px 20px;text-align:center;color:var(--mu);font-size:14px;line-height:1.6}
.mo{position:fixed;inset:0;background:rgba(28,26,23,.5);z-index:200;display:none;align-items:flex-end;backdrop-filter:blur(4px)}
.mo.open{display:flex}
.md{background:var(--sf);border-radius:24px 24px 0 0;width:100%;max-height:92dvh;overflow-y:auto;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));animation:su .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes su{from{transform:translateY(100%)}to{transform:translateY(0)}}
.mh{width:36px;height:4px;background:var(--bd);border-radius:2px;margin:12px auto 16px}
.mc{padding:0 20px 20px}
.mc h2{font-family:'Fraunces',serif;font-weight:300;font-size:22px;margin-bottom:5px}
.mm{font-size:13px;color:var(--mu);margin-bottom:16px;display:flex;gap:12px;flex-wrap:wrap}
.mm .co{color:var(--gr);font-weight:500}
.mm .kcal{color:#b07a10;font-weight:500}
.ms{margin-bottom:18px}
.ms h3{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mu);margin-bottom:8px;font-weight:500}
.il{list-style:none}
.il li{padding:8px 0;border-bottom:1px solid var(--bd);font-size:14px;display:flex;justify-content:space-between;align-items:center}
.il li:last-child{border-bottom:none}
.ir2{display:flex;gap:10px;align-items:center;color:var(--mu);font-size:13px}
.ipr{color:var(--gr);font-size:12px;font-weight:500}
.sl{list-style:none;counter-reset:st}
.sl li{counter-increment:st;padding:9px 0 9px 34px;border-bottom:1px solid var(--bd);font-size:14px;line-height:1.6;position:relative}
.sl li::before{content:counter(st);position:absolute;left:0;top:11px;width:22px;height:22px;background:var(--acs);color:var(--ac);font-size:11px;font-weight:500;border-radius:50%;display:flex;align-items:center;justify-content:center}
.sl li:last-child{border-bottom:none}
.mbr{display:flex;gap:8px;margin-top:8px}
.mb{flex:1;border:none;border-radius:12px;padding:13px;font-size:14px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif}
.mb.pr{background:var(--ac);color:white}.mb.se{background:var(--sf2);color:var(--tx)}.mb.ge{background:var(--grs);color:var(--gr)}
.kcal-badge{display:inline-flex;align-items:center;gap:4px;background:#FEF3C7;color:#92400E;border-radius:20px;padding:3px 10px;font-size:12px;font-weight:500}
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--tx);color:white;padding:10px 20px;border-radius:20px;font-size:13px;opacity:0;transition:all .3s;pointer-events:none;z-index:300;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
html.dark-theme .top-bar-wordmark{filter:brightness(0) invert(1)}
html.dark-theme .top-bar-logo{filter:brightness(0) invert(1) opacity(.85)}