/* Mise styles */
:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#20231e;background:#f2f0ea;font-synthesis:none;text-rendering:optimizeLegibility;--ink:#20231e;--paper:#fff;--canvas:#f2f0ea;--line:#dcd8cc;--muted:#70746b;--paprika:#f25f3a;--lime:#d9f06a;--soft:#e8e5dc;--shadow:0 14px 40px rgb(33 35 30/8%)}
*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--canvas)}button,input,select,textarea{font:inherit}button{border:0;cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid rgb(242 95 58/30%);outline-offset:2px}svg{width:1.1rem;height:1.1rem;stroke-width:2.2}.app-shell{width:min(1460px,100%);margin:auto;padding:18px 24px 40px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.brand{display:flex;align-items:center;gap:12px;background:transparent;color:var(--ink)}.brand>span{display:grid;width:44px;height:44px;place-items:center;border-radius:14px;background:var(--paprika);color:#fff;transform:rotate(-3deg)}.brand svg{width:24px;height:24px}.brand strong{font-family:"Arial Black",Impact,sans-serif;font-size:1.5rem;letter-spacing:-.06em}.top-actions,.title-actions{display:flex;align-items:center;gap:8px}.privacy-pill,.soft-button,.primary-button,.danger-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;border-radius:999px;padding:0 14px;font-size:.86rem;font-weight:800}.privacy-pill{background:#e4efdc;color:#3b6a2b}.privacy-pill.offline{background:#e6eef6;color:#386a91}.privacy-pill svg{width:16px}.soft-button{border:1px solid var(--line);background:#fff;color:var(--ink)}.soft-button:hover{background:#f9f7f2}.primary-button{background:var(--ink);color:#fff}.primary-button:hover{background:#343830}.primary-button:disabled{cursor:not-allowed;opacity:.45}.danger-button{background:#fee7df;color:#9e3d27}.icon-button{display:grid;width:42px;height:42px;place-items:center;border-radius:13px;background:#fff;color:#686c63}.icon-button:hover{background:#ebe8e0;color:var(--ink)}
.desktop-nav{display:inline-flex;gap:4px;margin-bottom:18px;border:1px solid #e6e2d8;border-radius:999px;background:#fff;padding:4px;box-shadow:0 5px 16px rgb(33 35 30/4%)}.desktop-nav button,.mobile-nav button{position:relative;display:flex;align-items:center;gap:7px;border-radius:999px;background:transparent;color:#696d64;font-weight:800}.desktop-nav button{height:42px;padding:0 14px}.desktop-nav button.active{background:var(--ink);color:#fff}.desktop-nav b,.mobile-nav b{display:grid;min-width:19px;height:19px;place-items:center;border-radius:99px;background:var(--lime);color:var(--ink);font-size:.68rem}.page{animation:page-in .24s ease both}@keyframes page-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.signal-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:310px;overflow:hidden;border-radius:34px;background:var(--paprika);padding:clamp(24px,5vw,58px);box-shadow:inset 0 0 0 1px rgb(32 35 30/8%)}.signal-copy{position:relative;z-index:2}.eyebrow{display:inline-flex;align-items:center;gap:6px;margin-bottom:9px;color:var(--paprika);font-size:.74rem;font-weight:950;letter-spacing:.13em}.signal-card .eyebrow{color:#6a2112}.signal-copy h1,.page-title h1,.recipe-import h1,.cook-intro h1{margin:0;font-family:"Arial Black",Impact,sans-serif;font-weight:900;letter-spacing:-.065em}.signal-copy h1{max-width:870px;font-size:clamp(2.65rem,6.8vw,6.4rem);line-height:.91}.signal-copy h1 em{font-style:normal;color:#fff}.signal-copy p{margin:18px 0 0;font-weight:750;color:#682617}.cook-now{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;min-width:260px;border-radius:24px;background:var(--ink);padding:10px 16px 10px 10px;color:#fff;box-shadow:0 16px 34px rgb(91 28 11/22%)}.cook-now>span{display:grid;width:54px;height:54px;place-items:center;border-radius:17px;background:var(--lime);color:var(--ink)}.cook-now svg{width:24px;height:24px}.signal-orbit{position:absolute;right:-55px;top:-100px;width:340px;height:340px;border:64px solid rgb(255 255 255/16%);border-radius:50%}
.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 32px}.insight-card{display:flex;align-items:center;gap:14px;min-width:0;border:1px solid var(--line);border-radius:20px;background:#fff;padding:16px}.insight-card>span{display:grid;flex:0 0 auto;width:44px;height:44px;place-items:center;border-radius:14px;background:#f0eee8;color:var(--paprika)}.insight-card div{display:grid;min-width:0}.insight-card small{color:var(--muted);font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.insight-card b{overflow:hidden;margin-top:2px;font-size:.98rem;text-overflow:ellipsis;white-space:nowrap}.insight-card p{margin:2px 0 0;color:var(--muted);font-size:.75rem}
.section-head,.page-title{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.section-head h2{margin:0;font-family:"Arial Black",Impact,sans-serif;font-size:2.2rem;letter-spacing:-.05em}.section-head h2 small{font-family:Inter,system-ui,sans-serif;color:var(--muted);font-size:.85rem;letter-spacing:0}.toolbar{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}.search{display:flex;align-items:center;gap:7px;height:42px;border:1px solid var(--line);border-radius:999px;background:#fff;padding:0 12px;color:#80847b}.search input{width:130px;border:0;outline:0;background:transparent}.filter-button,.category-row button{display:inline-flex;align-items:center;gap:6px;height:42px;border:1px solid var(--line);border-radius:999px;background:#fff;padding:0 12px;color:#666a61;font-size:.8rem;font-weight:850;text-transform:capitalize}.filter-button.active,.category-row button.active{border-color:var(--ink);background:var(--ink);color:#fff}.category-row{display:flex;gap:7px;margin:14px 0;overflow:auto;padding-bottom:2px;scrollbar-width:none}.category-row::-webkit-scrollbar{display:none}.category-row button{white-space:nowrap}.category-row button svg{width:15px;height:15px}.category-row .manage-categories{margin-left:auto;border-style:dashed;color:#41453d}
.stock-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:12px}.stock-card{--category:#92958d;display:flex;min-height:224px;flex-direction:column;border:1px solid var(--line);border-top:4px solid var(--category);border-radius:22px;background:#fff;padding:16px;box-shadow:0 3px 0 rgb(31 33 29/3%);transition:.18s transform,.18s box-shadow}.stock-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.stock-card.out{opacity:.6;filter:saturate(.5)}.stock-card-top{display:flex;align-items:center;justify-content:space-between}.category-mark{display:grid;width:38px;height:38px;place-items:center;border-radius:12px;background:#f4f2ed}.category-mark svg{width:18px;height:18px}.status-actions{display:flex;gap:4px;border-radius:12px;background:#f1efe9;padding:3px}.status-actions button{display:grid;width:32px;height:32px;place-items:center;border-radius:9px;background:transparent;color:#94978f}.status-actions button:hover{background:#fff;color:var(--ink)}.status-actions button.active.frozen{background:#e2effc;color:#286a9d}.status-actions button.active.open{background:#ffedd0;color:#8a5200}.status-actions button.active.low,.status-actions button.active.expiring{background:#ffe6df;color:#a33d27}.stock-name h3{margin:18px 0 2px;font-size:1.04rem;letter-spacing:-.02em}.stock-name p{margin:0;color:#888b82;font-size:.78rem;font-weight:700}.micro-signals{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}.micro-signals span{display:inline-flex;align-items:center;gap:4px;border-radius:99px;background:#f2f0ea;padding:4px 7px;color:#676b62;font-size:.68rem;font-weight:800}.micro-signals svg{width:12px;height:12px}.stock-card-bottom{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:16px}.stock-card-bottom>small{max-width:42px;overflow:hidden;color:var(--muted);font-size:.7rem;text-overflow:ellipsis}.stepper{display:grid;grid-template-columns:32px minmax(36px,auto) 32px;align-items:center;overflow:hidden;border:1px solid var(--line);border-radius:12px}.stepper button{display:grid;height:34px;place-items:center;background:#f5f3ee;color:var(--ink)}.stepper button:hover{background:var(--lime)}.stepper svg{width:14px}.stepper strong{text-align:center;font-size:.85rem}.card-actions{display:flex;gap:4px;margin-left:auto}.card-actions button{display:grid;width:35px;height:35px;place-items:center;border-radius:11px;background:#f0eee8;color:#71756c}.card-actions button:first-child{background:var(--ink);color:#fff}.card-actions button:hover{background:var(--paprika);color:#fff}
.panel-page{min-height:74vh;border-radius:32px;background:#fff;padding:clamp(22px,4vw,52px)}.page-title{margin-bottom:22px}.page-title h1{font-size:clamp(3rem,7vw,6.5rem);line-height:.9}.page-title p{margin:10px 0 0;color:var(--muted)}.import-panel{display:grid;grid-template-columns:minmax(180px,.6fr) minmax(250px,1.4fr) auto;align-items:end;gap:12px;margin-bottom:16px;border-radius:22px;background:#eeece6;padding:16px}.import-panel p{margin:4px 0 0;color:var(--muted);font-size:.8rem}.import-panel textarea{min-height:105px;resize:vertical;border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px}.quick-add{display:grid;grid-template-columns:1fr 48px;gap:8px;max-width:720px}.quick-add input{height:50px;border:1px solid var(--line);border-radius:15px;padding:0 14px;font-size:1rem}.quick-add button{display:grid;place-items:center;border-radius:15px;background:var(--paprika);color:#fff}.recent-strip{display:flex;align-items:center;gap:7px;margin:16px 0;overflow:auto;scrollbar-width:none}.recent-strip>span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:var(--muted);font-size:.72rem;font-weight:900;text-transform:uppercase}.recent-strip button{display:flex;align-items:center;gap:8px;white-space:nowrap;border:1px solid var(--line);border-radius:99px;background:#fff;padding:7px 10px;font-size:.78rem;font-weight:800}.recent-strip small{color:var(--muted);font-weight:600}.shopping-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.7fr);gap:18px}.shopping-list{display:grid;align-content:start;gap:8px}.shopping-row{display:grid;grid-template-columns:36px minmax(120px,1fr) auto auto 42px;align-items:center;gap:10px;border:1px solid var(--line);border-radius:17px;background:#faf9f5;padding:10px}.shopping-row.checked .shopping-name b{text-decoration:line-through;color:#8b8e87}.check-button{display:grid;width:32px;height:32px;place-items:center;border:2px solid #b5b9af;border-radius:10px;background:transparent}.shopping-row.checked .check-button{border-color:#78a649;background:var(--lime)}.shopping-name{display:grid}.shopping-name small{margin-top:2px;color:var(--muted);font-size:.7rem;text-transform:capitalize}.stock-button{display:inline-flex;align-items:center;gap:6px;height:38px;border-radius:12px;background:var(--ink);padding:0 12px;color:#fff;font-size:.78rem;font-weight:850}.stock-button:hover{background:#343830}.shopping-row .delete{width:38px;height:38px;background:transparent}.smart-panel{align-self:start;border-radius:24px;background:var(--ink);padding:22px;color:#fff}.smart-panel .eyebrow{color:var(--lime)}.smart-panel h2{margin:0;font-family:"Arial Black",Impact,sans-serif;font-size:2rem;letter-spacing:-.04em}.smart-panel>p{margin:7px 0 16px;color:#b9bdb3;font-size:.8rem;line-height:1.5}.smart-panel>div{display:grid;gap:5px}.smart-panel>div>button{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:9px;border-radius:14px;background:#30342d;padding:10px;color:#fff;text-align:left}.smart-panel>div>button:hover{background:#3a3f36}.smart-panel .rank{color:var(--lime);font-family:ui-monospace,monospace;font-size:.75rem}.smart-panel button span:nth-child(2){display:grid}.smart-panel button small{margin-top:2px;color:#9fa49a;font-size:.68rem}.smart-panel button>svg{color:var(--lime)}
.recipes-page{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);gap:14px;min-height:74vh}.recipe-import{display:flex;min-height:72vh;flex-direction:column;align-items:flex-start;border-radius:32px;background:var(--ink);padding:clamp(25px,4vw,52px);color:#fff}.recipe-import h1,.cook-intro h1{font-size:clamp(3.2rem,7vw,6rem);line-height:.9}.recipe-import>p,.cook-intro>p{max-width:470px;margin:20px 0;color:#c1c5bb;line-height:1.6}.recipe-import textarea{width:100%;min-height:280px;flex:1;resize:vertical;border:0;border-radius:18px;background:#30342d;padding:16px;color:#fff;line-height:1.5}.recipe-import textarea::placeholder{color:#8f958a}.recipe-import>button{margin-top:12px;background:var(--paprika)}.recipe-list{display:grid;align-content:start;gap:12px;border-radius:32px;background:var(--soft);padding:14px}.recipe-card{border:1px solid var(--line);border-radius:22px;background:#fff;padding:18px}.recipe-card-top{display:flex;align-items:start;justify-content:space-between;gap:12px}.recipe-card h2{margin:8px 0 0;font-size:1.35rem;letter-spacing:-.03em}.availability{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:5px 8px;font-size:.7rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.availability svg{width:13px}.availability.ready{background:#e5f4da;color:#3f702c}.availability.missing{background:#ffe8df;color:#9d3e27}.availability.unknown{background:#ecebe7;color:#666b62}.coverage{height:7px;margin:16px 0 12px;overflow:hidden;border-radius:99px;background:#eceae4}.coverage span{display:block;height:100%;border-radius:inherit;background:#81b64d}.ingredient-match{display:flex;flex-wrap:wrap;gap:6px}.ingredient-match span,.ingredient-match button{display:inline-flex;align-items:center;gap:4px;border-radius:99px;padding:6px 8px;font-size:.72rem;font-weight:800}.ingredient-match span{background:#eef6e8;color:#47742e}.ingredient-match button{background:#fff0e9;color:#9d3e27}.ingredient-match svg{width:12px}.ingredient-match small{opacity:.7}.recipe-card details{margin-top:14px;border-top:1px solid #e2ded4;padding-top:12px}.recipe-card summary{cursor:pointer;font-size:.8rem;font-weight:850}.recipe-card pre{max-height:340px;overflow:auto;white-space:pre-wrap;font-family:inherit;color:#555950;font-size:.78rem;line-height:1.6}.missing-all{margin-top:12px}.empty{display:grid;min-height:240px;place-items:center;align-content:center;gap:5px;border:1px dashed #c7c4ba;border-radius:22px;background:#f8f6f1;color:var(--muted);text-align:center}.empty>svg{width:28px;height:28px;margin-bottom:6px}.empty h3,.empty p{margin:0}.empty h3{color:var(--ink)}.empty p{max-width:350px;font-size:.83rem}
.cook-page{display:grid;grid-template-columns:minmax(300px,.74fr) minmax(0,1.26fr);min-height:75vh;overflow:hidden;border-radius:32px;background:var(--ink);color:#fff}.cook-intro{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(28px,4vw,58px)}.tone-switch{display:grid;width:100%;grid-template-columns:repeat(3,1fr);gap:6px;border-radius:18px;background:#30342d;padding:6px}.tone-switch button{display:flex;min-width:0;flex-direction:column;align-items:center;gap:4px;border-radius:13px;background:transparent;padding:10px 4px;color:#9da298;font-size:.7rem;font-weight:850;text-transform:capitalize}.tone-switch button.active{background:var(--lime);color:var(--ink)}.prompt-signals{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0}.prompt-signals span{display:inline-flex;align-items:center;gap:5px;border-radius:99px;background:#30342d;padding:6px 9px;color:#bbc0b6;font-size:.68rem;font-weight:800}.prompt-signals svg{width:12px}.copy-prompt{margin-top:auto;background:var(--paprika)}.prompt-paper{margin:14px;overflow:hidden;border-radius:23px;background:#f8f6f0;color:var(--ink);box-shadow:inset 0 0 0 1px #dedad0}.prompt-paper header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dedad0;padding:15px 18px}.prompt-paper header span{display:flex;align-items:center;gap:7px;font-weight:850}.prompt-paper header small{color:var(--muted)}.prompt-paper pre{height:calc(75vh - 76px);margin:0;overflow:auto;padding:20px;white-space:pre-wrap;font-family:inherit;font-size:.8rem;line-height:1.65}
.mobile-nav{display:none}.modal-backdrop{position:fixed;z-index:100;inset:0;display:grid;place-items:center;background:rgb(22 24 20/55%);padding:18px;backdrop-filter:blur(5px)}.modal{width:min(520px,100%);max-height:calc(100vh - 36px);overflow:auto;border-radius:26px;background:#fff;padding:22px;box-shadow:0 30px 90px rgb(0 0 0/26%)}.modal-wide{width:min(980px,100%)}.modal>header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.modal>header h2{margin:0;font-family:"Arial Black",Impact,sans-serif;font-size:1.7rem;letter-spacing:-.04em}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid label{display:grid;gap:6px;color:#686c63;font-size:.72rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.form-grid label.full,.form-grid .full{grid-column:1/-1}.form-grid input,.form-grid select,.category-form input{height:46px;border:1px solid var(--line);border-radius:13px;background:#fff;padding:0 12px;color:var(--ink);font-size:1rem;text-transform:none;letter-spacing:0}.status-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.status-picker button{display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:10px 5px;color:#70746b;font-size:.72rem;font-weight:850;text-transform:capitalize}.status-picker button.active{border-color:var(--paprika);background:#fff0eb;color:#9c381f}.settings-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px}.settings-grid h3{margin:0;font-size:1.2rem}.settings-grid>section>p{margin:6px 0 16px;color:var(--muted);font-size:.82rem;line-height:1.5}.category-manager{display:grid;gap:6px}.category-manager>div{display:grid;grid-template-columns:22px 1fr auto 34px;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:8px}.category-manager svg{width:15px}.category-manager small{color:var(--muted);font-size:.7rem}.category-manager button{display:grid;width:30px;height:30px;place-items:center;border-radius:9px;background:#f1efe9;color:#777b72}.category-form{display:grid;gap:9px;margin-top:12px}.color-picker{display:flex;flex-wrap:wrap;gap:6px}.color-picker button{width:27px;height:27px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #c9c5bb}.color-picker button.active{box-shadow:0 0 0 3px var(--ink)}.data-actions{display:grid;gap:8px}.data-actions button{justify-content:flex-start;border-radius:13px}.privacy-note{display:flex;gap:10px;margin-top:18px;border-radius:15px;background:#edf4e8;padding:14px;color:#37662a}.privacy-note>svg{flex:0 0 auto}.privacy-note b{font-size:.82rem}.privacy-note p{margin:4px 0 0;font-size:.73rem;line-height:1.45}.toast{position:fixed;z-index:200;left:50%;bottom:24px;display:flex;align-items:center;gap:8px;border-radius:99px;background:var(--ink);padding:11px 16px;color:#fff;font-size:.84rem;font-weight:850;box-shadow:0 16px 40px rgb(0 0 0/20%);transform:translateX(-50%);animation:toast-in .18s ease both}@keyframes toast-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:900px){.app-shell{padding:14px 14px 92px}.desktop-nav{display:none}.privacy-pill{display:none}.top-actions .soft-button{display:none}.signal-card{grid-template-columns:1fr;gap:24px;min-height:0}.cook-now{min-width:0;width:min(100%,330px)}.insight-grid{grid-template-columns:1fr}.section-head,.page-title{align-items:flex-start;flex-direction:column}.toolbar{justify-content:flex-start}.category-row .manage-categories{margin-left:0}.shopping-layout,.recipes-page,.cook-page{grid-template-columns:1fr}.import-panel{grid-template-columns:1fr}.smart-panel{order:-1}.recipe-import{min-height:620px}.recipe-list{min-height:300px}.cook-intro{min-height:620px}.prompt-paper pre{height:55vh}.settings-grid{grid-template-columns:1fr}.mobile-nav{position:fixed;z-index:80;right:10px;bottom:10px;left:10px;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;border:1px solid rgb(255 255 255/8%);border-radius:23px;background:var(--ink);padding:6px;box-shadow:0 18px 45px rgb(0 0 0/22%)}.mobile-nav button{height:58px;flex-direction:column;justify-content:center;gap:2px;border-radius:17px;color:#959b90;font-size:.62rem}.mobile-nav button.active{background:#383d34;color:#fff}.mobile-nav button svg{width:20px;height:20px}.mobile-nav b{position:absolute;top:4px;right:calc(50% - 27px);font-size:.58rem}.toast{bottom:88px}}
@media(max-width:620px){.topbar{align-items:center}.top-actions{gap:5px}.top-actions .primary-button{width:42px;padding:0;font-size:0}.top-actions .primary-button svg{width:19px}.signal-card{border-radius:25px;padding:22px}.signal-copy h1{font-size:2.8rem}.insight-grid{grid-template-columns:1fr}.toolbar{width:100%}.search{width:100%}.search input{width:100%}.filter-button span{display:none}.stock-grid{grid-template-columns:1fr}.panel-page{border-radius:24px;padding:20px 14px}.page-title h1{font-size:3.2rem}.title-actions{width:100%;flex-wrap:wrap}.shopping-row{grid-template-columns:34px 1fr auto}.shopping-row .stepper{grid-column:2}.shopping-row .stock-button{grid-column:3}.shopping-row>.delete{grid-column:3;grid-row:1}.recent-strip{margin-inline:-3px}.recipe-import,.recipe-list,.cook-page{border-radius:24px}.recipe-import,.cook-intro{padding:24px 18px}.recipe-import h1,.cook-intro h1{font-size:3.3rem}.prompt-paper{margin:0 9px 9px}.form-grid{grid-template-columns:1fr}.form-grid label.full,.form-grid .full{grid-column:auto}.status-picker{grid-template-columns:repeat(2,1fr)}.modal{padding:18px}.category-manager>div{grid-template-columns:20px 1fr 34px}.category-manager small{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

/* --------------------------------------------------------------------------
   Visual polish pass
   -------------------------------------------------------------------------- */
html{color-scheme:light;scrollbar-gutter:stable}
body{line-height:1.4;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,select,textarea{min-width:0}
button{line-height:1;-webkit-tap-highlight-color:transparent}
svg{display:block;flex:0 0 auto;overflow:visible;vertical-align:middle}
[hidden]{display:none!important}

/* Keep icon geometry optically centred in every control. */
.brand>span,.icon-button,.category-mark,.status-actions button,.stepper button,.card-actions button,.check-button,.quick-add button,.category-manager button{place-items:center}
.brand>span{transform:none}
.brand svg{transform:none}
.brand strong{letter-spacing:-.045em;line-height:1}
.icon-button svg{width:18px;height:18px}
.privacy-pill svg,.soft-button svg,.primary-button svg,.danger-button svg{width:16px;height:16px}
.desktop-nav button svg{width:17px;height:17px}
.desktop-nav button{justify-content:center}
.desktop-nav b,.mobile-nav b{line-height:1}

/* Hero and overview cards. */
.signal-card{grid-template-columns:minmax(0,1fr) minmax(240px,300px);gap:clamp(24px,4vw,54px)}
.signal-copy{min-width:0}
.signal-copy h1{overflow-wrap:anywhere}
.cook-now{width:100%;min-width:0;text-align:left}
.cook-now>b{line-height:1.15}
.cook-now>svg{width:18px;height:18px}
.insight-card>span svg{width:20px;height:20px}
.insight-card b{line-height:1.2}

/* Toolbars and filters. */
.section-head{align-items:center}
.toolbar{align-items:center}
.search svg,.filter-button svg{width:16px;height:16px}
.search input{line-height:1.2}
.filter-button,.category-row button{justify-content:center}
.category-row{align-items:center}
.category-row button{flex:0 0 auto}
.category-row .manage-categories{margin-left:auto}

/* Stock cards. */
.stock-card{min-width:0}
.stock-card-top{min-height:38px}
.status-actions button svg{width:16px;height:16px}
.stock-name h3{line-height:1.2}
.micro-signals span{line-height:1.1}
.stock-card-bottom{min-width:0}
.stock-card-bottom>small{max-width:72px;white-space:nowrap}
.stepper{flex:0 0 auto}
.stepper button{width:32px;padding:0}
.stepper svg{width:13px;height:13px}
.stepper strong{min-width:36px;padding:0 4px;line-height:1}
.card-actions button svg{width:16px;height:16px}

/* Shopping and recipe controls. */
.quick-add button{width:48px;padding:0}
.quick-add button svg{width:19px;height:19px}
.shopping-row{min-width:0}
.shopping-name{min-width:0}
.shopping-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}
.check-button{padding:0}
.check-button svg{width:17px;height:17px}
.stock-button{justify-content:center;white-space:nowrap}
.stock-button svg{width:16px;height:16px}
.smart-panel>div>button{min-width:0}
.smart-panel button span:nth-child(2){min-width:0}
.smart-panel button b,.smart-panel button small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.smart-panel button>svg{width:16px;height:16px}
.recipe-card-top>div{min-width:0}
.recipe-card h2{overflow-wrap:anywhere;line-height:1.2}
.availability svg,.ingredient-match svg{height:auto}

/* Cook view: use the available height without forcing awkward offsets. */
.cook-page{align-items:stretch}
.cook-intro{min-width:0}
.tone-switch button svg{width:18px;height:18px}
.prompt-paper{display:flex;min-width:0;min-height:0;flex-direction:column}
.prompt-paper header{gap:14px}
.prompt-paper header span{min-width:0}
.prompt-paper pre{flex:1;min-height:420px;height:auto;overflow:auto}

/* Forms and modals. */
.modal>header{gap:16px}
.modal>header h2{line-height:1.05}
.form-grid input,.form-grid select,.category-form input,.import-panel textarea,.recipe-import textarea{outline:0}
.form-grid input:focus,.form-grid select:focus,.category-form input:focus,.import-panel textarea:focus,.recipe-import textarea:focus{border-color:#aaa69b;box-shadow:0 0 0 3px rgb(242 95 58/10%)}
.status-picker button{min-height:42px;line-height:1.1}
.status-picker button svg{width:16px;height:16px}
.category-manager>div{min-width:0}
.category-manager b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.category-manager button svg{width:15px;height:15px}
.data-actions button{min-height:44px}
.privacy-note>svg{width:18px;height:18px;margin-top:1px}
.toast svg{width:16px;height:16px}

@media(max-width:1100px){
  .signal-card{grid-template-columns:minmax(0,1fr) 250px}
  .shopping-layout{grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr)}
}

@media(max-width:900px){
  .signal-card{grid-template-columns:1fr}
  .cook-now{width:min(100%,360px)}
  .section-head{align-items:flex-start}
  .recipe-import,.cook-intro{min-height:0}
  .prompt-paper{margin-top:0}
  .prompt-paper pre{min-height:380px;height:auto}
  .mobile-nav button{align-items:center}
  .mobile-nav button svg{width:19px;height:19px}
}

@media(max-width:760px){
  .shopping-row{grid-template-columns:36px minmax(0,1fr) auto;gap:8px 10px}
  .shopping-row .stepper{grid-column:2;justify-self:start}
  .shopping-row .stock-button{grid-column:3;justify-self:end}
  .shopping-row>.delete{grid-column:3;grid-row:1;justify-self:end}
  .recipe-card-top{align-items:flex-start}
}

@media(max-width:620px){
  .app-shell{padding-inline:12px}
  .topbar{gap:10px;margin-bottom:14px}
  .brand{gap:9px}
  .brand>span{width:40px;height:40px;border-radius:12px}
  .brand svg{width:21px;height:21px}
  .brand strong{font-size:1.35rem}
  .top-actions .icon-button,.top-actions .primary-button{width:40px;height:40px;min-height:40px}
  .signal-card{padding:24px 20px}
  .signal-copy h1{font-size:clamp(2.65rem,13vw,3.5rem)}
  .signal-copy p{line-height:1.45}
  .cook-now{width:100%;grid-template-columns:48px minmax(0,1fr) 18px;padding:8px 13px 8px 8px;border-radius:20px}
  .cook-now>span{width:48px;height:48px;border-radius:14px}
  .insight-card{padding:14px}
  .section-head h2{font-size:2rem}
  .category-row{margin-inline:-12px;padding-inline:12px}
  .stock-card{min-height:214px}
  .stock-card-bottom{gap:6px}
  .panel-page{padding:22px 16px}
  .page-title h1{font-size:clamp(3rem,16vw,4.5rem)}
  .title-actions{gap:6px}
  .title-actions .soft-button,.title-actions .primary-button{flex:1 1 auto}
  .shopping-row{padding:10px 9px}
  .shopping-row .stock-button{padding-inline:10px}
  .recipe-import h1,.cook-intro h1{font-size:clamp(3.1rem,16vw,4.4rem)}
  .prompt-paper header{padding:13px 15px}
  .prompt-paper pre{min-height:330px;padding:16px;font-size:.77rem}
  .modal-backdrop{align-items:end;padding:10px}
  .modal{width:100%;max-height:calc(100dvh - 20px);border-radius:24px;padding:18px}
  .settings-grid{gap:24px}
  .toast{max-width:calc(100vw - 24px);white-space:normal;text-align:center}
}

/* Final geometry fixes for compact cards and icon-only controls. */
body{overflow-x:hidden}
main{min-height:100vh;min-height:100dvh}
button{padding:0}
.brand{padding:0}
.stock-card-bottom{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
.stock-card-bottom>small{min-width:0;max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.category-manager svg{width:15px;height:15px}
.availability svg{width:13px;height:13px}
.ingredient-match svg{width:12px;height:12px}
.prompt-signals svg{width:12px;height:12px}
@media(max-width:900px){
  .app-shell{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  .mobile-nav{bottom:max(10px,env(safe-area-inset-bottom,0px))}
}

/* Mobile shopping stays single-column; keep the list primary and suggestions below it. */
@media(max-width:900px){
  .shopping-layout{grid-template-columns:1fr}
  .smart-panel{order:0}
}

/* --------------------------------------------------------------------------
   Lucide + spacing pass
   -------------------------------------------------------------------------- */
:root{
  --gap-xs:6px;
  --gap-sm:10px;
  --gap-md:16px;
  --gap-lg:24px;
  --gap-xl:32px;
}

/* Lucide owns its geometry. Avoid global SVG rules making different icons
   look optically larger/smaller or clipping strokes at control edges. */
svg.lucide{
  display:block;
  width:1em;
  height:1em;
  flex:0 0 auto;
  overflow:visible;
  stroke-width:2;
  vector-effect:non-scaling-stroke;
}
button svg.lucide{pointer-events:none}
.eyebrow svg.lucide{width:14px;height:14px}
.brand svg.lucide{width:23px;height:23px}
.icon-button svg.lucide{width:18px;height:18px}
.desktop-nav button svg.lucide{width:17px;height:17px}
.mobile-nav button svg.lucide{width:20px;height:20px}

/* Give cards/panels consistent breathing room instead of letting adjacent
   surfaces visually merge into one another. */
.app-shell{padding:20px 24px 44px}
.topbar{margin-bottom:22px}
.desktop-nav{margin-bottom:22px}
.signal-card{margin-bottom:16px}
.insight-grid{gap:16px;margin:0 0 36px}
.section-head{margin-bottom:2px}
.toolbar{gap:8px}
.category-row{gap:8px;margin:16px 0 18px}
.stock-grid{gap:16px}
.stock-card{padding:17px;min-height:228px}
.stock-card-top{gap:12px}
.status-actions{gap:5px}
.stock-card-bottom{gap:10px;padding-top:18px}
.card-actions{gap:6px}

.panel-page{padding:clamp(24px,4vw,54px)}
.page-title{margin-bottom:26px}
.title-actions{gap:10px}
.import-panel{gap:16px;margin-bottom:20px;padding:18px}
.quick-add{gap:10px}
.recent-strip{gap:8px;margin:18px 0 20px}
.recent-strip button{gap:7px;padding:8px 11px}
.recent-strip button svg.lucide{width:14px;height:14px;color:var(--paprika)}
.shopping-layout{gap:24px}
.shopping-list{gap:12px}
.shopping-row{gap:12px;padding:12px}
.smart-panel{padding:24px}
.smart-panel>div{gap:8px}
.smart-panel>div>button{gap:10px;padding:12px}

.recipes-page{gap:20px}
.recipe-import{padding:clamp(28px,4vw,54px)}
.recipe-import>button{margin-top:16px}
.recipe-list{gap:16px;padding:18px}
.recipe-card{padding:20px}
.recipe-card details{margin-top:16px;padding-top:14px}
.recipe-card summary{display:inline-flex;align-items:center;gap:7px}
.recipe-card summary svg.lucide{width:15px;height:15px;color:var(--paprika)}
.ingredient-match{gap:7px}
.missing-all{margin-top:16px}

.cook-page{gap:0}
.cook-intro{padding:clamp(30px,4vw,58px)}
.tone-switch{gap:8px;padding:7px}
.prompt-signals{gap:8px;margin:18px 0 20px}
.prompt-signals span{padding:7px 10px}
.prompt-paper{margin:16px}
.prompt-paper header{padding:16px 19px}
.prompt-paper pre{padding:22px}

.modal{padding:24px}
.modal>header{margin-bottom:22px}
.form-grid{gap:14px}
.status-picker{gap:8px}
.settings-grid{gap:32px}
.category-manager{gap:8px}
.category-manager>div{gap:10px;padding:10px}
.category-form{gap:10px;margin-top:16px}
.data-actions{gap:10px}
.privacy-note{margin-top:20px;padding:16px}

@media(max-width:900px){
  .app-shell{padding:14px 14px calc(96px + env(safe-area-inset-bottom,0px))}
  .signal-card{margin-bottom:14px}
  .insight-grid{gap:12px;margin-bottom:30px}
  .shopping-layout,.recipes-page{gap:16px}
  .recipe-list{padding:14px}
  .prompt-paper{margin:14px}
  .settings-grid{gap:26px}
}

@media(max-width:620px){
  .app-shell{padding-inline:12px}
  .topbar{margin-bottom:16px}
  .signal-card{padding:24px 20px}
  .category-row{margin-top:14px;margin-bottom:16px}
  .stock-grid{gap:14px}
  .stock-card{padding:16px}
  .panel-page{padding:22px 16px}
  .page-title{margin-bottom:22px}
  .title-actions{gap:8px}
  .import-panel{gap:12px;padding:15px}
  .shopping-layout{gap:14px}
  .shopping-list{gap:10px}
  .shopping-row{gap:9px 10px;padding:11px 10px}
  .smart-panel{padding:20px}
  .recipes-page{gap:14px}
  .recipe-import{padding:26px 18px}
  .recipe-list{gap:12px;padding:12px}
  .recipe-card{padding:17px}
  .cook-intro{padding:26px 18px}
  .prompt-paper{margin:0 10px 10px}
  .modal{padding:19px}
  .settings-grid{gap:24px}
}

/* --------------------------------------------------------------------------
   Icon/layout correction — use Lucide's own SVG output inside fixed icon slots
   -------------------------------------------------------------------------- */
.ui-icon{
  --icon-size:18px;
  display:inline-grid;
  width:var(--icon-size);
  height:var(--icon-size);
  min-width:var(--icon-size);
  flex:0 0 var(--icon-size);
  place-items:center;
  overflow:hidden;
  line-height:0;
  vertical-align:-0.12em;
  color:inherit;
}
.ui-icon>svg,
.ui-icon>i{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  margin:0;
}
.ui-icon>svg.lucide{
  overflow:hidden;
  stroke-width:2;
  vector-effect:none;
}
/* A restrained placeholder is visible only if Lucide has not loaded yet. */
.ui-icon>i[data-lucide]{
  width:70%;
  height:70%;
  border:1.5px solid currentColor;
  border-radius:4px;
  opacity:.28;
}

/* Context-specific icon sizing. The wrapper—not the SVG path—owns layout. */
.brand .ui-icon{--icon-size:24px}
.privacy-pill .ui-icon,
.soft-button .ui-icon,
.primary-button .ui-icon,
.danger-button .ui-icon{--icon-size:17px}
.icon-button .ui-icon{--icon-size:18px}
.desktop-nav .ui-icon{--icon-size:18px}
.mobile-nav .ui-icon{--icon-size:20px}
.eyebrow .ui-icon{--icon-size:15px}
.search .ui-icon,
.filter-button .ui-icon{--icon-size:17px}
.status-actions .ui-icon{--icon-size:17px}
.stepper .ui-icon{--icon-size:15px}
.card-actions .ui-icon{--icon-size:18px}
.quick-add .ui-icon{--icon-size:21px}
.stock-button .ui-icon{--icon-size:17px}
.smart-panel .ui-icon{--icon-size:17px}
.recent-strip .ui-icon{--icon-size:15px}
.availability .ui-icon{--icon-size:13px}
.ingredient-match .ui-icon{--icon-size:13px}
.recipe-card summary .ui-icon{--icon-size:15px}
.tone-switch .ui-icon{--icon-size:19px}
.prompt-signals .ui-icon{--icon-size:13px}
.prompt-paper header .ui-icon{--icon-size:18px}
.category-manager .ui-icon{--icon-size:16px}
.privacy-note>.ui-icon{--icon-size:19px}
.toast .ui-icon{--icon-size:16px}
.empty>.ui-icon{--icon-size:29px}

/* Every icon+label control gets an actual visual gutter. */
.eyebrow{gap:8px}
.privacy-pill,
.soft-button,
.primary-button,
.danger-button{gap:9px}
.desktop-nav button{gap:9px}
.filter-button,
.category-row button{gap:9px}
.stock-button{gap:8px}
.recent-strip>span,
.recent-strip button{gap:8px}
.availability{gap:6px}
.ingredient-match span,
.ingredient-match button{gap:6px}
.recipe-card summary{gap:8px}
.prompt-paper header span{gap:9px}
.prompt-signals span{gap:7px}

/* Category chips get semantic Lucide icons, while retaining their colour. */
.category-row{gap:10px;margin:18px 0 22px}
.category-row button{
  height:44px;
  padding:0 13px 0 9px;
}
.category-glyph{
  --category:#7b8077;
  display:grid;
  width:27px;
  height:27px;
  min-width:27px;
  place-items:center;
  overflow:hidden;
  border-radius:9px;
  background:color-mix(in srgb,var(--category) 15%,white);
  color:var(--category);
}
.category-glyph .ui-icon{--icon-size:16px}
.category-glyph.all-glyph,
.category-glyph.neutral-glyph{
  background:#efede7;
  color:#656a61;
}
.category-filter.active .category-glyph{
  background:rgb(255 255 255 / 14%);
  color:#fff;
}
.category-filter.active .category-glyph.all-glyph,
.category-filter.active .category-glyph.neutral-glyph{color:#fff}
.manage-categories>.ui-icon{--icon-size:18px}

/* Category icon on each stock card. */
.category-mark{
  width:42px;
  height:42px;
  border-radius:13px;
  background:color-mix(in srgb,var(--category) 10%,#f4f2ed);
}
.category-mark>.category-glyph{
  width:30px;
  height:30px;
  min-width:30px;
  background:transparent;
}
.category-mark>.category-glyph .ui-icon{--icon-size:19px}
.category-mark>.ui-icon{--icon-size:19px;color:#7b8077}

/* Category settings should use the same icon treatment, not bare dots. */
.category-manager>div{
  grid-template-columns:32px minmax(0,1fr) auto 36px;
  gap:11px;
  padding:11px 10px;
}
.category-manager .category-glyph{
  width:30px;
  height:30px;
  min-width:30px;
}

/* More deliberate spacing between distinct surfaces. */
.stock-grid{gap:18px}
.stock-card{padding:18px;min-height:232px}
.stock-card-top{gap:14px}
.status-actions{gap:5px;padding:4px}
.status-actions button{width:34px;height:34px}
.stock-card-bottom{gap:11px;padding-top:20px}
.card-actions{gap:7px;margin-left:auto}
.insight-grid{gap:18px;margin-bottom:38px}
.panel-page{padding:clamp(26px,4vw,56px)}
.page-title{margin-bottom:30px}
.import-panel{gap:18px;margin-bottom:22px;padding:20px}
.quick-add{gap:11px}
.recent-strip{margin:20px 0 22px}
.shopping-layout{gap:30px}
.shopping-list{gap:14px}
.shopping-row{gap:13px;padding:13px}
.smart-panel{padding:26px}
.smart-panel>div{gap:10px}
.smart-panel>div>button{gap:12px;padding:13px}
.recipes-page{gap:24px}
.recipe-list{gap:18px;padding:20px}
.recipe-card{padding:21px}
.recipe-card details{margin-top:18px;padding-top:16px}
.cook-page{column-gap:0}
.prompt-paper{margin:20px}
.prompt-paper header{padding:17px 20px}
.prompt-paper pre{padding:24px}
.settings-grid{gap:36px}
.data-actions{gap:11px}

@media(max-width:900px){
  .category-row{gap:9px;margin:16px 0 19px}
  .stock-grid{gap:15px}
  .shopping-layout,.recipes-page{gap:18px}
  .shopping-list{gap:12px}
  .recipe-list{gap:14px;padding:15px}
  .prompt-paper{margin:15px}
}

@media(max-width:620px){
  .category-row{gap:8px;margin-inline:-12px;padding-inline:12px}
  .category-row button{height:42px;padding-inline:8px 11px}
  .category-glyph{width:25px;height:25px;min-width:25px}
  .category-glyph .ui-icon{--icon-size:15px}
  .stock-grid{gap:15px}
  .stock-card{padding:16px}
  .shopping-layout{gap:16px}
  .shopping-list{gap:11px}
  .shopping-row{gap:10px;padding:11px}
  .recipes-page{gap:16px}
  .recipe-list{gap:13px;padding:12px}
  .recipe-card{padding:18px}
  .prompt-paper{margin:0 10px 10px}
  .settings-grid{gap:26px}
}


/* Stock editing controls. */
.card-actions .edit-stock-button{background:#f0eee8;color:#62675f}
.card-actions .edit-stock-button:hover{background:#e6e2d8;color:var(--ink)}
.form-hint{margin:0;color:var(--muted);font-size:.74rem;line-height:1.45}
@media(max-width:1180px) and (min-width:621px){
  .stock-card-bottom{grid-template-columns:auto minmax(0,1fr)}
  .card-actions{grid-column:1/-1;justify-content:flex-end;margin-left:0}
}

/* Keep quantity + unit on their own row, separate from card action icons. */
.stock-card-bottom{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:
    "quantity unit"
    "actions actions";
  align-items:center;
  column-gap:10px;
  row-gap:12px;
}
.stock-card-bottom>.stepper{
  grid-area:quantity;
  justify-self:start;
}
.stock-card-bottom>small{
  grid-area:unit;
  justify-self:start;
  min-width:0;
  max-width:100%;
  overflow:visible;
  white-space:nowrap;
  text-overflow:clip;
  font-size:.74rem;
}
.stock-card-bottom>.card-actions{
  grid-area:actions;
  display:flex;
  width:100%;
  justify-content:flex-end;
  gap:7px;
  margin-left:0;
}

@media(max-width:620px){
  .stock-card-bottom{
    column-gap:9px;
    row-gap:10px;
    padding-top:16px;
  }
}

/* --------------------------------------------------------------------------
   Phone density + icon reliability pass
   -------------------------------------------------------------------------- */

/* Lucide strokes can extend fractionally beyond their nominal viewBox.
   The wrapper owns layout sizing, but should never crop the drawing. */
.ui-icon,
.ui-icon > svg,
.ui-icon > svg.lucide{
  overflow:visible;
}
.ui-icon{
  align-items:center;
  justify-items:center;
  vertical-align:middle;
}
.ui-icon > svg.lucide{
  width:100%;
  height:100%;
  stroke:currentColor;
}

@media(max-width:620px){
  /* Make the top of Stock useful sooner on a phone. */
  .app-shell{
    padding:12px 10px calc(92px + env(safe-area-inset-bottom,0px));
  }
  .signal-card{
    gap:15px;
    padding:18px;
    border-radius:24px;
  }
  .signal-copy h1{
    font-size:clamp(2.25rem,11vw,2.9rem);
    line-height:.93;
  }
  .signal-copy p{
    margin-top:11px;
    font-size:.86rem;
  }
  .cook-now{
    grid-template-columns:42px minmax(0,1fr) 17px;
    gap:9px;
    padding:7px 11px 7px 7px;
    border-radius:18px;
  }
  .cook-now>span{
    width:42px;
    height:42px;
    border-radius:13px;
  }
  .cook-now .ui-icon{--icon-size:20px}

  /* Three glanceable signals in one row instead of three tall cards. */
  .insight-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin:10px 0 24px;
  }
  .insight-card{
    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    align-items:start;
    gap:7px;
    min-height:72px;
    padding:9px;
    border-radius:16px;
  }
  .insight-card>span{
    width:30px;
    height:30px;
    border-radius:10px;
  }
  .insight-card>span .ui-icon{--icon-size:15px}
  .insight-card small{
    font-size:.54rem;
    line-height:1.15;
    letter-spacing:.055em;
  }
  .insight-card b{
    margin-top:3px;
    font-size:.76rem;
    line-height:1.12;
  }
  .insight-card p{display:none}

  .section-head{gap:14px}
  .section-head h2{font-size:1.9rem}

  /* Search gets a full row; the four state filters become proper icon buttons.
     Previous CSS hid all spans here, including the .ui-icon wrapper. */
  .toolbar{
    display:grid;
    width:100%;
    grid-template-columns:repeat(5,40px);
    justify-content:start;
    gap:7px;
  }
  .search{
    grid-column:1/-1;
    width:100%;
    height:40px;
  }
  .filter-button{
    width:40px;
    height:40px;
    min-width:40px;
    padding:0;
    border-radius:13px;
  }
  .filter-button>.ui-icon{
    display:inline-grid !important;
    --icon-size:17px;
  }
  .filter-button>span:not(.ui-icon){display:none}

  /* Category chips keep their Lucide glyphs and scroll horizontally. */
  .category-row{
    gap:7px;
    margin:13px -10px 15px;
    padding:0 10px 2px;
  }
  .category-row button{
    height:39px;
    gap:7px;
    padding:0 10px 0 7px;
    font-size:.72rem;
  }
  .category-glyph{
    width:24px;
    height:24px;
    min-width:24px;
    border-radius:8px;
  }
  .category-glyph .ui-icon{--icon-size:14px}
  .manage-categories>.ui-icon{--icon-size:16px}

  /* Phone stock is intentionally a dense two-column catalogue. */
  .stock-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .stock-card{
    min-height:202px;
    padding:11px;
    border-top-width:3px;
    border-radius:18px;
  }
  .stock-card:hover{
    transform:none;
    box-shadow:0 3px 0 rgb(31 33 29/3%);
  }
  .stock-card-top{
    min-height:32px;
    gap:6px;
  }
  .category-mark{
    width:32px;
    height:32px;
    min-width:32px;
    border-radius:10px;
  }
  .category-mark>.category-glyph{
    width:24px;
    height:24px;
    min-width:24px;
  }
  .category-mark>.category-glyph .ui-icon,
  .category-mark>.ui-icon{--icon-size:15px}
  .status-actions{
    gap:2px;
    padding:2px;
    border-radius:10px;
  }
  .status-actions button{
    width:24px;
    height:28px;
    border-radius:8px;
  }
  .status-actions .ui-icon{--icon-size:13px}

  .stock-name h3{
    display:-webkit-box;
    min-height:2.2em;
    margin:11px 0 2px;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    font-size:.9rem;
    line-height:1.1;
  }
  .stock-name p{
    overflow:hidden;
    font-size:.66rem;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  /* Analytics are useful on desktop but take disproportionate room here. */
  .stock-card .micro-signals{display:none}

  .stock-card-bottom{
    column-gap:5px;
    row-gap:8px;
    padding-top:11px;
  }
  .stepper{
    grid-template-columns:26px minmax(27px,auto) 26px;
    border-radius:10px;
  }
  .stepper button{
    width:26px;
    height:30px;
  }
  .stepper .ui-icon{--icon-size:12px}
  .stepper strong{
    min-width:27px;
    padding:0 2px;
    font-size:.73rem;
  }
  .stock-card-bottom>small{
    max-width:50px;
    overflow:hidden;
    font-size:.64rem;
    line-height:1.1;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .stock-card-bottom>.card-actions{
    gap:5px;
  }
  .card-actions button{
    width:30px;
    height:30px;
    border-radius:9px;
  }
  .card-actions .ui-icon{--icon-size:15px}

  /* Keep the bottom navigation icons optically centred and uncropped. */
  .mobile-nav{
    right:8px;
    bottom:max(8px,env(safe-area-inset-bottom,0px));
    left:8px;
  }
  .mobile-nav button{height:56px}
  .mobile-nav .ui-icon{--icon-size:19px}
}

/* The 2-up catalogue remains usable even on very narrow phones. */
@media(max-width:350px){
  .stock-grid{gap:8px}
  .stock-card{padding:10px}
  .status-actions button{width:23px}
  .stock-card-bottom>small{max-width:42px}
  .card-actions button{width:29px;height:29px}
}


/* Near-expiry state replaces the old quantity-based low flag. */
.status-actions button.active.expiring{background:#ffe6df;color:#a33d27}

@media(max-width:620px){
  /* Never let a card's top controls force the two-column catalogue wider. */
  .stock-card-top{min-width:0}
  .status-actions{min-width:0;flex:0 1 auto}
  .status-actions button{flex:0 0 auto}
  .stock-card-bottom{min-width:0}
  .stock-card-bottom>.stepper{max-width:100%}
  .stock-card-bottom>.card-actions{min-width:0}
  .card-actions button{flex:0 0 auto}

  /* On phones labels would crowd four compact state buttons; icons carry the state. */
  .filter-button>span:not(.ui-icon){display:none!important}
}

/* --------------------------------------------------------------------------
   Input responsiveness + category icon chooser
   -------------------------------------------------------------------------- */
.search{
  position:relative;
  padding-right:7px;
}
.search input{
  flex:1 1 auto;
  min-width:0;
}
.search-clear{
  display:grid;
  flex:0 0 auto;
  width:28px;
  height:28px;
  place-items:center;
  border-radius:999px;
  background:#f0eee8;
  color:#70746b;
}
.search-clear:hover{background:#e5e2da;color:var(--ink)}
.search-clear .ui-icon{--icon-size:14px}

.category-option-label{
  margin-top:2px;
  color:#686c63;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.category-icon-picker{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
}
.category-icon-picker button{
  display:grid;
  min-width:0;
  min-height:58px;
  place-items:center;
  gap:4px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:7px 4px;
  color:#666a61;
}
.category-icon-picker button:hover{background:#f7f5f0;color:var(--ink)}
.category-icon-picker button.active{
  border-color:var(--ink);
  background:var(--ink);
  color:#fff;
  box-shadow:0 0 0 2px rgb(32 35 30/8%);
}
.category-icon-picker .ui-icon{--icon-size:18px}
.category-icon-picker span:not(.ui-icon){
  max-width:100%;
  overflow:hidden;
  font-size:.62rem;
  font-weight:800;
  line-height:1.05;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media(max-width:620px){
  .search-clear{width:30px;height:30px}
  .category-icon-picker{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .category-icon-picker button{min-height:54px;border-radius:11px}
}


/* Multi-status stock flags: independent toggles can be active together. */
.status-actions button.active.leftover{background:#ece7fb;color:#6249a8}
.status-picker button.active.frozen{border-color:#5f91c9;background:#edf5ff;color:#286a9d}
.status-picker button.active.open{border-color:#c3903f;background:#fff5df;color:#8a5200}
.status-picker button.active.expiring{border-color:#d15336;background:#fff0eb;color:#a33d27}
.status-picker button.active.leftover{border-color:#7b6bd1;background:#f3efff;color:#5b47a2}
@media(max-width:620px){
  .status-actions button{width:22px}
  .status-actions .ui-icon{--icon-size:12px}
}

/* --------------------------------------------------------------------------
   Recipe library + safer stock editing
   -------------------------------------------------------------------------- */
.edit-danger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:8px;
  border-top:1px solid var(--line);
  padding-top:14px;
}
.danger-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  border-radius:11px;
  background:#fff1ee;
  padding:0 11px;
  color:#a23c28;
  font-size:.78rem;
  font-weight:850;
}
.danger-link:hover{background:#a23c28;color:#fff}
.danger-link .ui-icon{--icon-size:16px}
.edit-danger small{max-width:250px;color:var(--muted);font-size:.68rem;line-height:1.4;text-align:right}
.quantity-hint{align-self:end;margin:0 0 5px;color:var(--muted);font-size:.68rem;line-height:1.35}

.recipe-library-page{
  display:grid;
  gap:16px;
  min-height:72vh;
  border-radius:32px;
  background:#ece9e0;
  padding:clamp(18px,3vw,32px);
}
.recipe-library-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  border-radius:24px;
  background:var(--ink);
  padding:clamp(22px,4vw,38px);
  color:#fff;
}
.recipe-library-head .eyebrow{color:var(--paprika)}
.recipe-library-head h1{
  margin:0;
  font-family:"Arial Black",Impact,sans-serif;
  font-size:clamp(2.4rem,5vw,4.8rem);
  letter-spacing:-.065em;
  line-height:.92;
}
.recipe-library-head p{margin:12px 0 0;color:#bdc2b7;font-size:.86rem}
.recipe-library-head>.primary-button{flex:0 0 auto;background:var(--paprika)}

.recipe-toolbar{
  display:grid;
  grid-template-columns:minmax(210px,1fr) repeat(3,minmax(140px,auto));
  gap:9px;
  border-radius:18px;
  background:#fff;
  padding:10px;
  box-shadow:0 2px 0 rgb(31 33 29/3%);
}
.recipe-toolbar select,
.recipe-search{
  height:42px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#faf9f6;
  color:var(--ink);
  font-size:.78rem;
  font-weight:750;
}
.recipe-toolbar select{padding:0 10px;outline:0}
.recipe-search{display:flex;align-items:center;gap:7px;padding:0 9px;color:var(--muted)}
.recipe-search>.ui-icon{--icon-size:16px}
.recipe-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--ink);font-size:.86rem}
.recipe-search button{display:grid;width:27px;height:27px;place-items:center;border-radius:8px;background:#eeece6;color:#6d7169}
.recipe-search button .ui-icon{--icon-size:13px}

.recipe-list.recipe-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(265px,1fr));
  align-content:start;
  gap:12px;
  min-height:320px;
  border-radius:0;
  background:transparent;
  padding:0;
}
.recipe-card.recipe-card-button{
  display:flex;
  min-width:0;
  min-height:230px;
  flex-direction:column;
  align-items:stretch;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  padding:17px;
  color:var(--ink);
  text-align:left;
  box-shadow:0 3px 0 rgb(31 33 29/3%);
  transition:.16s transform,.16s box-shadow,.16s border-color;
}
.recipe-card.recipe-card-button:hover{transform:translateY(-2px);border-color:#c9c4b9;box-shadow:var(--shadow)}
.recipe-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.availability{
  display:inline-flex;
  align-items:center;
  gap:5px;
  width:max-content;
  border-radius:999px;
  padding:6px 9px;
  font-size:.68rem;
  font-weight:900;
}
.availability.ready{background:#e9f4e2;color:#376b2a}
.availability.missing{background:#fff0eb;color:#9b3e27}
.availability .ui-icon{--icon-size:13px}
.cooked-count{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:.68rem;font-weight:850}
.cooked-count .ui-icon{--icon-size:13px}
.recipe-card.recipe-card-button h2{margin:15px 0 10px;font-size:1.22rem;letter-spacing:-.035em;line-height:1.08}
.recipe-meta{display:flex;flex-wrap:wrap;gap:6px 10px;color:#72766d;font-size:.69rem;font-weight:750}
.recipe-meta span{display:inline-flex;align-items:center;gap:4px;min-width:0}
.recipe-meta .ui-icon{--icon-size:13px;flex:0 0 auto}
.recipe-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.recipe-tags span{border-radius:999px;background:#f0eee8;padding:5px 8px;color:#60645c;font-size:.63rem;font-weight:850;text-transform:capitalize}
.recipe-card.recipe-card-button .coverage{height:6px;margin-top:auto;margin-bottom:10px;border-radius:99px;background:#edeae2;overflow:hidden}
.recipe-card.recipe-card-button .coverage span{display:block;height:100%;border-radius:inherit;background:var(--lime)}
.recipe-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted)}
.recipe-card-foot small{font-size:.67rem;font-weight:750}
.recipe-card-foot .ui-icon{--icon-size:16px;color:var(--ink)}

.recipe-import-modal>p{margin:0 0 12px;color:var(--muted);font-size:.82rem;line-height:1.5}
.recipe-import-modal textarea{
  width:100%;
  min-height:min(52vh,500px);
  resize:vertical;
  border:1px solid var(--line);
  border-radius:16px;
  background:#f7f5f0;
  padding:15px;
  outline:0;
  font:500 .8rem/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.recipe-import-modal textarea:focus{border-color:#a9a59a;box-shadow:0 0 0 3px rgb(242 95 58/10%)}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}

.recipe-detail{display:grid;gap:18px}
.recipe-detail-summary{display:grid;gap:10px;border-radius:18px;background:#f5f3ed;padding:15px}
.recipe-detail-meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px 12px;color:#666a61;font-size:.72rem;font-weight:800}
.recipe-detail-meta>span:not(.availability){display:inline-flex;align-items:center;gap:5px}
.recipe-detail-meta .ui-icon{--icon-size:14px}
.recipe-detail-summary .recipe-tags{margin-top:0}
.recipe-detail-grid{display:grid;grid-template-columns:minmax(270px,.85fr) minmax(0,1.15fr);gap:16px;align-items:start}
.recipe-ingredients,.recipe-method{min-width:0;border:1px solid var(--line);border-radius:19px;background:#fff;padding:15px}
.recipe-section-title{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.recipe-section-title .ui-icon{--icon-size:18px;color:var(--paprika)}
.recipe-section-title h3{margin:0;font-size:1rem}
.ingredient-list{display:grid;gap:7px}
.ingredient-row{
  display:grid;
  grid-template-columns:28px minmax(0,1fr) auto 30px;
  align-items:center;
  gap:8px;
  min-height:52px;
  border-radius:13px;
  background:#f7f5f0;
  padding:7px 8px;
}
.ingredient-row.available{background:#f0f6ec}
.ingredient-row.short{background:#fff5df}
.ingredient-row.missing{background:#fff1ed}
.ingredient-state{display:grid;width:26px;height:26px;place-items:center;border-radius:8px;background:#fff;color:#6d7169}
.ingredient-row.available .ingredient-state{color:#3c792e}
.ingredient-row.short .ingredient-state{color:#9a6500}
.ingredient-row.missing .ingredient-state{color:#a33d27}
.ingredient-state .ui-icon{--icon-size:14px}
.ingredient-row>div{display:grid;min-width:0;gap:2px}
.ingredient-row b{overflow:hidden;font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}
.ingredient-row small{color:var(--muted);font-size:.62rem}
.ingredient-row>strong{font-size:.72rem;white-space:nowrap}
.ingredient-shop{display:grid;width:29px;height:29px;place-items:center;border-radius:9px;background:#fff;color:var(--ink)}
.ingredient-shop .ui-icon{--icon-size:14px}
.recipe-steps{display:grid;gap:9px}
.recipe-step{display:grid;grid-template-columns:31px minmax(0,1fr);gap:10px;border-radius:14px;background:#f6f4ef;padding:11px}
.recipe-step>span{display:grid;width:31px;height:31px;place-items:center;border-radius:10px;background:var(--ink);color:#fff;font-size:.72rem;font-weight:950}
.recipe-step p{margin:2px 0 0;color:#3d403a;font-size:.79rem;line-height:1.55}
.recipe-legacy-text p{color:var(--muted);font-size:.78rem}
.recipe-legacy-text pre{max-height:300px;overflow:auto;border-radius:12px;background:#f3f1eb;padding:12px;font-size:.72rem;white-space:pre-wrap}
.recipe-detail-actions{display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--line);padding-top:14px}
.cooked-button{background:var(--ink)}
.recipe-history{text-align:right;color:var(--muted);font-size:.68rem;font-weight:750}
.recipe-danger{display:flex;justify-content:flex-end}

@media(max-width:900px){
  .recipe-toolbar{grid-template-columns:1fr 1fr}
  .recipe-search{grid-column:1/-1}
  .recipe-detail-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .recipe-library-page{margin-inline:-2px;border-radius:24px;padding:12px}
  .recipe-library-head{align-items:flex-start;flex-direction:column;border-radius:20px;padding:20px}
  .recipe-library-head h1{font-size:2.7rem}
  .recipe-library-head>.primary-button{width:100%}
  .recipe-toolbar{grid-template-columns:1fr;gap:7px;padding:8px}
  .recipe-search{grid-column:auto}
  .recipe-toolbar select,.recipe-search{width:100%;height:40px}
  .recipe-list.recipe-grid{grid-template-columns:1fr;gap:9px}
  .recipe-card.recipe-card-button{min-height:190px;border-radius:18px;padding:14px}
  .recipe-card.recipe-card-button h2{margin:12px 0 8px;font-size:1.1rem}
  .recipe-detail-summary{padding:12px}
  .recipe-ingredients,.recipe-method{padding:11px;border-radius:16px}
  .ingredient-row{grid-template-columns:26px minmax(0,1fr) auto 28px;gap:6px;padding:6px}
  .ingredient-row>strong{font-size:.66rem}
  .recipe-step{grid-template-columns:28px minmax(0,1fr);gap:8px;padding:9px}
  .recipe-step>span{width:28px;height:28px}
  .recipe-detail-actions{flex-direction:column-reverse}
  .recipe-detail-actions button{width:100%;justify-content:center}
  .edit-danger{align-items:flex-start;flex-direction:column}
  .edit-danger small{text-align:left}
  .quantity-hint{margin-top:-6px}
}

/* Recipe detail behaves like a page on phones, not a tiny text popup. */
.modal:has(.recipe-detail){width:min(1040px,100%)}
@media(max-width:620px){
  .modal-backdrop:has(.recipe-detail){align-items:stretch;padding:0}
  .modal:has(.recipe-detail){width:100%;height:100dvh;max-height:100dvh;border-radius:0;padding:16px 14px 96px}
  .modal:has(.recipe-detail)>header{position:sticky;z-index:4;top:-16px;margin:-16px -14px 14px;background:#fff;padding:16px 14px 12px;border-bottom:1px solid var(--line)}
}

/* Device-to-device merge transfer ----------------------------------------- */
.transfer-button{background:#fff7f3;border-color:#f1c9bc;color:#8f3d27}
.transfer-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);gap:28px;align-items:start}
.transfer-explainer h3,.transfer-import h3{margin:8px 0 8px;font-size:1.45rem;letter-spacing:-.035em}
.transfer-explainer>p,.transfer-import>div>p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.6}
.transfer-counts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.transfer-counts > span{display:flex;align-items:center;gap:8px;min-height:44px;border:1px solid var(--line);border-radius:13px;background:#f8f7f3;padding:9px 11px;color:#666b62;font-size:.76rem}
.transfer-counts > span > .ui-icon{display:grid;flex:0 0 24px;width:24px;height:24px;min-width:24px;min-height:24px;place-items:center;border:0;border-radius:7px;background:#fff;padding:0;color:#777c73;--icon-size:16px}
.transfer-counts > span > .ui-icon svg{display:block;width:16px!important;height:16px!important;overflow:visible}
.transfer-counts > span > b{color:var(--ink);font-size:.92rem}
.transfer-privacy,.transfer-merge-note{display:flex;align-items:flex-start;gap:10px;margin-top:16px;border-radius:15px;background:#edf4e8;padding:13px;color:#37662a}
.transfer-privacy .ui-icon,.transfer-merge-note .ui-icon{flex:0 0 auto;margin-top:1px;--icon-size:18px}
.transfer-privacy p,.transfer-merge-note p{margin:0;font-size:.76rem;line-height:1.5}
.transfer-code-panel{display:grid;gap:12px;border:1px solid var(--line);border-radius:20px;background:#f8f7f3;padding:16px}
.qr-shell{display:grid;place-items:center;min-height:266px;border:1px solid #e5e1d8;border-radius:16px;background:#fff;padding:16px;overflow:hidden}
.qr-code{display:grid;place-items:center;max-width:100%}
.qr-code canvas,.qr-code img{display:block;max-width:100%;height:auto!important}
.qr-shell.qr-unavailable{align-content:center;gap:10px;text-align:center}
.qr-shell.qr-unavailable p{max-width:280px;margin:0;color:var(--muted);font-size:.78rem;line-height:1.5}
.transfer-loading,.transfer-error{display:flex;align-items:center;justify-content:center;gap:9px;min-height:260px;border-radius:16px;background:#fff;color:var(--muted);font-size:.85rem;font-weight:800}
.transfer-error{color:#9b3e2d;background:#fff0ec}
.transfer-link-field{display:grid;gap:6px;color:#74786f;font-size:.7rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.transfer-link-field textarea{width:100%;resize:none;border:1px solid var(--line);border-radius:12px;background:#fff;padding:10px;color:#545950;font:500 .7rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:none;letter-spacing:0;overflow-wrap:anywhere}
.transfer-actions{display:flex;gap:8px;flex-wrap:wrap}
.transfer-actions button{flex:1;min-width:120px}
.transfer-too-large{display:flex;align-items:flex-start;gap:11px;border:1px solid #efd4c8;border-radius:16px;background:#fff3ee;padding:14px;color:#8f3d27}
.transfer-too-large>.ui-icon{flex:0 0 auto;margin-top:2px;--icon-size:19px}
.transfer-too-large b{display:block;margin-bottom:4px;color:#7b2f20;font-size:.9rem}
.transfer-too-large p{margin:0;color:#80594e;font-size:.78rem;line-height:1.5}
.transfer-file-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.transfer-file-actions button{min-width:0}
.transfer-receive{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin-top:2px;border-top:1px solid var(--line);padding-top:12px}
.transfer-receive b{display:block;margin-bottom:2px;font-size:.82rem}
.transfer-receive p{margin:0;color:var(--muted);font-size:.72rem;line-height:1.45}
.transfer-receive button{white-space:nowrap}
.transfer-import{display:grid;grid-template-columns:auto 1fr;gap:16px 14px;align-items:start}
.transfer-import-icon{display:grid;width:52px;height:52px;place-items:center;border-radius:15px;background:#fff0eb;color:var(--paprika)}
.transfer-import-icon .ui-icon{--icon-size:25px}
.transfer-import>.transfer-counts,.transfer-import>.transfer-merge-note,.transfer-import>.modal-actions{grid-column:1/-1}
.transfer-counts.incoming{margin-top:4px}
.transfer-import>.modal-actions{margin-top:2px}

@media(max-width:720px){
  .transfer-layout{grid-template-columns:1fr;gap:18px}
  .transfer-code-panel{padding:12px}
  .qr-shell{min-height:240px;padding:12px}
  .transfer-file-actions{grid-template-columns:1fr}
  .transfer-receive{grid-template-columns:1fr}
  .transfer-receive button{width:100%}
  .transfer-counts{grid-template-columns:1fr 1fr}
  .transfer-import{grid-template-columns:44px 1fr;gap:12px}
  .transfer-import-icon{width:44px;height:44px;border-radius:13px}
}
@media(max-width:390px){
  .transfer-counts{grid-template-columns:1fr}
  .transfer-actions{display:grid;grid-template-columns:1fr 1fr}
}

/* Recipe import / cook prompt usability */
.prompt-paper-actions{display:flex;align-items:center;gap:10px}
.prompt-copy-top{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;background:#fff;padding:7px 10px;color:var(--ink);font-size:.72rem;font-weight:900}
.prompt-copy-top .ui-icon{--icon-size:15px}
.copy-prompt-floating{position:fixed;right:22px;bottom:22px;z-index:35;display:inline-flex;align-items:center;gap:8px;border-radius:999px;background:var(--paprika);padding:11px 15px;color:#fff;box-shadow:0 10px 30px rgba(29,33,28,.24);font-weight:900}
.copy-prompt-floating .ui-icon{--icon-size:18px}
@media (max-width:700px){
  .prompt-paper header small{display:none}
  .prompt-copy-top{padding:7px 9px}
  .copy-prompt-floating{right:14px;bottom:86px;padding:10px 12px}
  .copy-prompt-floating span:last-child{display:none}
}


/* v18 mobile polish + help/prompt defaults */
.ui-icon{overflow:visible}
.ui-icon>svg.lucide{overflow:visible}
.help-button{white-space:nowrap}
.help-guide{display:grid;gap:16px}
.help-lead{margin:0;color:var(--muted);line-height:1.6}
.help-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.help-steps section{border:1px solid var(--line);border-radius:18px;background:#faf9f5;padding:14px}
.help-steps h3{margin:0 0 6px;font-size:1rem}
.help-steps p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}
.template-editor{display:grid;gap:12px}
.template-editor p{margin:0;color:var(--muted);line-height:1.55}
.template-token-list{display:flex;flex-wrap:wrap;gap:8px}
.template-token-list code{border-radius:999px;background:#f1efe9;padding:6px 10px;font-family:ui-monospace,monospace;font-size:.78rem}
.template-editor textarea{width:100%;min-height:420px;resize:vertical;border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px;font:inherit;line-height:1.5}
.form-error{margin:0;color:#a33d27;font-size:.85rem;font-weight:800}
.recent-strip button{flex:0 0 auto}
@media(max-width:900px){
  .help-steps{grid-template-columns:1fr}
}
@media(max-width:620px){
  .topbar{align-items:flex-start}
  .brand strong{font-size:1.35rem}
  .top-actions{gap:6px;flex-wrap:nowrap}
  .top-actions .help-button,
  .top-actions .icon-button,
  .top-actions .primary-button{width:44px;height:44px;min-height:44px;padding:0;border-radius:14px;justify-content:center}
  .top-actions .primary-button{gap:0}
  .top-actions .help-button{font-size:0}
  .top-actions .help-button .ui-icon{--icon-size:18px}
  .top-actions .help-button span:last-child{display:none}
  .top-actions .primary-button span:last-child{display:none}
  .prompt-paper-actions{flex-wrap:wrap;justify-content:flex-end}
  .prompt-copy-top{padding:8px 10px}
  .copy-prompt{width:100%}
  .recent-strip{padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .recent-strip>span{flex:0 0 auto}
  .template-editor textarea{min-height:360px}
}

/* v19 phone header + stock-page vertical rhythm */
@media(max-width:620px){
  /* The Add stock label is already hidden by font-size:0. Do not hide its
     only element child — that child is the Lucide + icon wrapper. */
  .top-actions .primary-button > span.ui-icon:last-child{
    display:inline-grid !important;
    color:#fff;
    --icon-size:20px;
  }

  /* The older <=900px rule hides all soft buttons. Bring the dedicated help
     action back as an icon-only phone control. */
  .top-actions .help-button{
    display:inline-flex !important;
  }

  /* Keep all three phone header controls on the same optical grid. */
  .top-actions .help-button,
  .top-actions .icon-button,
  .top-actions .primary-button{
    align-items:center;
    justify-content:center;
  }
  .top-actions .icon-button > .ui-icon,
  .top-actions .help-button > .ui-icon,
  .top-actions .primary-button > .ui-icon{
    margin:0;
    vertical-align:0;
  }

  /* The three glance cards already create their own visual separation. The
     previous 24px bottom margin made the Pantry section feel disconnected. */
  .stock-page .insight-grid{
    margin:10px 0 12px;
  }
  .stock-page .section-head{
    margin-top:0;
  }
}


/* v21 install experience */
.install-banner{display:grid;grid-template-columns:38px minmax(0,1fr) 18px;align-items:center;gap:10px;width:max-content;max-width:360px;margin:-8px 0 16px auto;border:1px solid var(--line);border-radius:16px;background:#fff;padding:8px 10px;color:var(--ink);text-align:left;box-shadow:0 3px 0 rgb(31 33 29/3%)}
.install-banner:hover{background:#f9f7f2}
.install-banner-icon{display:grid;width:38px;height:38px;place-items:center;border-radius:11px;background:var(--lime);color:var(--ink)}
.install-banner-icon .ui-icon{--icon-size:18px}
.install-banner-copy{display:grid;gap:1px}
.install-banner-copy b{font-size:.82rem}
.install-banner-copy small{color:var(--muted);font-size:.68rem}
.install-banner>.ui-icon{--icon-size:16px}
.install-help{display:grid;gap:14px}
.install-help-icon{display:grid;width:54px;height:54px;place-items:center;border-radius:16px;background:#fff0eb;color:var(--paprika)}
.install-help-icon .ui-icon{--icon-size:26px}
.install-help p{margin:0;color:var(--muted);line-height:1.55}
.install-help ol{display:grid;gap:8px;margin:0;padding-left:22px;color:var(--ink)}
.install-help-note{border-radius:14px;background:#edf4e8;padding:12px;color:#37662a!important;font-size:.82rem}
@media(max-width:620px){
  .install-banner{width:100%;max-width:none;margin:-2px 0 12px;border-radius:15px}
}


/* v22 hero recipe path */
.signal-actions{position:relative;z-index:2;display:grid;gap:10px;min-width:260px}
.signal-recipe-button{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:10px;border-radius:20px;background:#fff;padding:8px 14px 8px 8px;color:var(--ink);text-align:left;box-shadow:0 10px 24px rgb(91 28 11/12%)}
.signal-recipe-button>span{display:grid;width:42px;height:42px;place-items:center;border-radius:13px;background:#f3f0e9;color:var(--paprika)}
.signal-recipe-button .ui-icon{--icon-size:20px}
.signal-recipe-button b{font-size:.9rem}
.signal-recipe-button:disabled{cursor:not-allowed;opacity:.58}
.signal-actions .cook-now{width:100%;min-width:0}
.recipe-active-filter{display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;margin:-2px 0 14px;border-radius:999px;background:#fff0eb;padding:7px 8px 7px 11px;color:#8f3925;font-size:.78rem;font-weight:800}
.recipe-active-filter>.ui-icon{--icon-size:15px}
.recipe-active-filter span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recipe-active-filter button{display:grid;width:26px;height:26px;flex:0 0 26px;place-items:center;border-radius:999px;background:#fff;color:#8f3925}
.recipe-active-filter button .ui-icon{--icon-size:13px}
@media(max-width:900px){
  .signal-actions{width:min(100%,330px);min-width:0}
}
@media(max-width:620px){
  .signal-actions{grid-template-columns:1fr 1.35fr;width:100%;gap:8px}
  .signal-recipe-button{grid-template-columns:34px minmax(0,1fr);gap:7px;padding:6px 9px 6px 6px;border-radius:17px}
  .signal-recipe-button>span{width:34px;height:34px;border-radius:11px}
  .signal-recipe-button .ui-icon{--icon-size:17px}
  .signal-recipe-button b{font-size:.76rem;line-height:1.05}
  .signal-actions .cook-now{grid-template-columns:34px minmax(0,1fr) 14px;padding:6px 8px 6px 6px;border-radius:17px}
  .signal-actions .cook-now>span{width:34px;height:34px;border-radius:11px}
  .signal-actions .cook-now .ui-icon{--icon-size:17px}
  .signal-actions .cook-now b{font-size:.78rem}
}

/* v23 — shopping list is a stock-aware restock workflow */
.shopping-row{
  grid-template-columns:36px minmax(140px,1fr) auto auto 42px;
}
.shopping-name small{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
  text-transform:none;
}
.stock-link-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  border-radius:999px;
  padding:3px 7px;
  font-size:.62rem;
  font-weight:900;
  line-height:1;
}
.stock-link-badge.linked{background:#e4efdc;color:#3b6a2b}
.stock-link-badge.unlinked{background:#fff0eb;color:#9c381f}
.shopping-quantity{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}
.shopping-unit-input{
  width:68px;
  min-width:0;
  height:34px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  padding:0 8px;
  color:var(--ink);
  font-size:.75rem;
  font-weight:800;
}
.shopping-unit-input::placeholder{color:#a0a39b;font-weight:700}
.stock-button.add-product{background:var(--paprika)}
.stock-button.add-product:hover{background:#cf4c2b}
.stock-button.restock{background:var(--ink)}

@media(max-width:760px){
  .shopping-row{
    grid-template-columns:34px minmax(0,1fr) auto;
    grid-template-areas:
      "check name delete"
      ". qty action";
    gap:9px 8px;
    padding:11px 10px;
  }
  .shopping-row>.check-button{grid-area:check}
  .shopping-row>.shopping-name{grid-area:name;min-width:0}
  .shopping-row>.shopping-quantity{grid-area:qty;justify-self:start;max-width:100%}
  .shopping-row>.stock-button{grid-area:action;justify-self:end}
  .shopping-row>.delete{grid-area:delete;justify-self:end}
  .shopping-unit-input{width:60px}
}

@media(max-width:390px){
  .shopping-row{
    grid-template-columns:32px minmax(0,1fr) 36px;
  }
  .shopping-row>.shopping-quantity{
    gap:5px;
  }
  .shopping-unit-input{width:54px;padding-inline:6px}
  .shopping-row>.stock-button{
    min-width:76px;
    padding-inline:9px;
  }
}

/* v24 fine-grained transfer controls */
.transfer-select-actions{display:flex;gap:8px;margin:14px 0 10px}
.transfer-select-actions button{border-radius:999px;background:#f1efe9;padding:7px 11px;color:#666b62;font-size:.72rem;font-weight:850}
.transfer-select-actions button:hover{background:#e7e4dc;color:var(--ink)}
.transfer-section-picker{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.transfer-section-picker>button{display:grid;grid-template-columns:36px minmax(0,1fr) 26px;align-items:center;gap:9px;min-width:0;border:1px solid var(--line);border-radius:15px;background:#fff;padding:10px;text-align:left;color:var(--ink)}
.transfer-section-picker>button:hover{background:#faf9f5}
.transfer-section-picker>button.active{border-color:#b9d591;background:#f3f8ed;box-shadow:inset 0 0 0 1px #d9e8c6}
.transfer-section-icon{display:grid;width:36px;height:36px;place-items:center;border-radius:11px;background:#f1efe9;color:#6d7268}
.transfer-section-picker>button.active .transfer-section-icon{background:#e4efdc;color:#416d31}
.transfer-section-icon .ui-icon{--icon-size:18px}
.transfer-section-picker>button>span:nth-child(2){display:grid;min-width:0;gap:2px}
.transfer-section-picker b{font-size:.8rem}
.transfer-section-picker small{overflow:hidden;color:var(--muted);font-size:.65rem;line-height:1.25;text-overflow:ellipsis}
.transfer-section-check{display:grid;width:24px;height:24px;place-items:center;border:1px solid #d8d4ca;border-radius:8px;background:#f8f7f3;color:#567a3f}
.transfer-section-picker>button.active .transfer-section-check{border-color:#9dbb7e;background:#fff}
.transfer-section-check .ui-icon{--icon-size:14px}
.transfer-mode-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:18px 0 8px}
.transfer-mode-heading b{font-size:.8rem}
.transfer-mode-heading small{color:var(--muted);font-size:.68rem}
.transfer-mode-picker{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.transfer-mode-picker>button{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:8px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:10px;color:#686d64;text-align:left}
.transfer-mode-picker>button>.ui-icon{--icon-size:18px}
.transfer-mode-picker>button>span{display:grid;gap:2px}
.transfer-mode-picker b{color:var(--ink);font-size:.78rem}
.transfer-mode-picker small{color:var(--muted);font-size:.63rem;line-height:1.3}
.transfer-mode-picker>button.active{border-color:#92b971;background:#f1f7eb;color:#497135}
.transfer-mode-picker>button.active.replace{border-color:#e7ad9e;background:#fff1ec;color:#9b3f29}
.transfer-mode-picker.compact small{display:none}
.transfer-replace-warning{display:flex;align-items:flex-start;gap:9px;margin-top:10px;border-radius:14px;background:#fff0eb;padding:11px;color:#913e2a}
.transfer-replace-warning>.ui-icon{flex:0 0 auto;margin-top:1px;--icon-size:17px}
.transfer-replace-warning p{margin:0;font-size:.72rem;line-height:1.45}
.transfer-export-summary{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-radius:12px;background:#fff;padding:9px 11px}
.transfer-export-summary b{font-size:.78rem}
.transfer-export-summary small{color:var(--muted);font-size:.68rem}
.transfer-import.fine-tune>.transfer-import-controls{grid-column:1/-1;display:grid;gap:0}
.transfer-import.fine-tune>.modal-actions{grid-column:1/-1}
.transfer-import-counts{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.transfer-import-counts>span{display:inline-flex;align-items:center;gap:5px;border-radius:999px;background:#f2f0ea;padding:6px 9px;color:#90948c;font-size:.68rem}
.transfer-import-counts>span.active{background:#eaf3e2;color:#4d7339}
.transfer-import-counts .ui-icon{--icon-size:13px}
.transfer-import-counts small{font-size:inherit}
@media(max-width:620px){
  .transfer-section-picker{grid-template-columns:1fr}
  .transfer-mode-picker{grid-template-columns:1fr}
  .transfer-mode-picker.compact{grid-template-columns:1fr 1fr}
  .transfer-mode-picker.compact>button{grid-template-columns:22px 1fr;padding:9px}
  .transfer-code-panel{min-width:0}
  .transfer-export-summary{align-items:flex-start;flex-direction:column;gap:2px}
}

/* --------------------------------------------------------------------------
   v26 manual recipe editor
   -------------------------------------------------------------------------- */
.recipe-head-actions{flex:0 0 auto}
.recipe-head-actions .primary-button{background:var(--paprika)}
.recipe-head-actions .soft-button{border-color:#4b5047;background:#30342d;color:#fff}
.recipe-head-actions .soft-button:hover{background:#3a3f36}

.recipe-editor{display:grid;gap:18px}
.recipe-editor-basics{
  display:grid;
  grid-template-columns:2fr repeat(3,minmax(120px,1fr));
  gap:10px;
  border-radius:18px;
  background:#f6f4ef;
  padding:14px;
}
.recipe-editor-basics label{display:grid;gap:6px;min-width:0}
.recipe-editor-basics label>span,
.ingredient-editor-row label>span{color:#6c7067;font-size:.66rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.recipe-editor-basics input,
.ingredient-editor-row input,
.recipe-stock-search input,
.method-editor-row textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
  color:var(--ink);
  padding:9px 10px;
}
.recipe-editor-basics input{height:42px}
.recipe-editor-title{grid-column:span 2}
.recipe-editor-tags{grid-column:span 2}
.recipe-editor-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:14px;align-items:start}
.recipe-editor-section,.recipe-stock-picker{border:1px solid var(--line);border-radius:18px;background:#fff;padding:14px}
.recipe-stock-picker{position:sticky;top:0}
.recipe-editor-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.recipe-editor-section-head .eyebrow{margin-bottom:3px}
.recipe-editor-section-head h3{margin:0;font-size:1.05rem}
.compact-button{min-height:36px;padding:0 11px;font-size:.75rem}
.recipe-editor-help{margin:0 0 10px;color:var(--muted);font-size:.76rem;line-height:1.45}
.ingredient-editor-list{display:grid;gap:8px}
.ingredient-editor-row{
  display:grid;
  grid-template-columns:minmax(160px,1fr) 92px 92px 36px;
  align-items:end;
  gap:8px;
  border-radius:14px;
  background:#f7f5f0;
  padding:9px;
}
.ingredient-editor-name{display:grid;min-width:0;gap:4px}
.ingredient-editor-name>div{display:grid;min-width:0}
.ingredient-editor-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.84rem}
.ingredient-editor-name small{color:var(--muted);font-size:.66rem}
.ingredient-source-badge{justify-self:start;border-radius:999px;padding:3px 6px;font-size:.58rem;font-weight:950;letter-spacing:.05em;text-transform:uppercase}
.ingredient-source-badge.stock{background:#e8f1df;color:#477338}
.ingredient-source-badge.buy{background:#eeeae2;color:#777268}
.ingredient-editor-row label{display:grid;gap:4px}
.ingredient-remove{width:36px;height:36px;border-radius:10px;background:#fff}
.recipe-editor-empty{border:1px dashed #d6d2c8;border-radius:13px;padding:15px;color:var(--muted);font-size:.78rem;line-height:1.45;text-align:center}
.recipe-stock-search{display:flex;align-items:center;gap:7px;height:42px;margin:8px 0;border:1px solid var(--line);border-radius:12px;background:#faf9f6;padding:0 9px}
.recipe-stock-search>.ui-icon{--icon-size:16px;color:#777b72}
.recipe-stock-search input{min-width:0;height:38px;border:0;background:transparent;padding:0;outline:0}
.recipe-stock-search button{display:grid;width:27px;height:27px;place-items:center;border-radius:999px;background:#eeece6;color:#72766e}
.recipe-stock-search button .ui-icon{--icon-size:13px}
.recipe-stock-scroll{display:grid;gap:6px;max-height:390px;overflow:auto;padding-right:3px;overscroll-behavior:contain}
.recipe-stock-option{
  display:grid;
  grid-template-columns:30px minmax(0,1fr) auto 18px;
  align-items:center;
  gap:8px;
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  background:#faf9f5;
  padding:8px;
  color:var(--ink);
  text-align:left;
}
.recipe-stock-option:hover:not(:disabled){border-color:#b9b4aa;background:#fff}
.recipe-stock-option.selected{opacity:.62;background:#edf3e7}
.recipe-stock-option span:nth-child(2){display:grid;min-width:0}
.recipe-stock-option b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem}
.recipe-stock-option small{color:var(--muted);font-size:.61rem}
.recipe-stock-option strong{font-size:.68rem;white-space:nowrap}
.recipe-stock-option>.ui-icon:last-child{--icon-size:15px}
.method-editor{display:grid;gap:8px}
.method-editor-list{display:grid;gap:8px}
.method-editor-row{display:grid;grid-template-columns:30px minmax(0,1fr) 36px;align-items:start;gap:8px}
.method-editor-row>span{display:grid;width:30px;height:30px;place-items:center;border-radius:9px;background:var(--ink);color:#fff;font-size:.7rem;font-weight:950}
.method-editor-row textarea{min-height:58px;resize:vertical;line-height:1.45}
.method-editor-row .icon-button{width:36px;height:36px;border:1px solid var(--line);border-radius:10px}
.recipe-editor-error{margin:-6px 0 0}
.recipe-editor-actions{padding-top:4px}
.modal:has(.recipe-editor){width:min(1120px,100%)}

@media(max-width:900px){
  .recipe-editor-basics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .recipe-editor-title,.recipe-editor-tags{grid-column:1/-1}
  .recipe-editor-grid{grid-template-columns:1fr}
  .recipe-stock-picker{position:static}
  .recipe-stock-scroll{max-height:280px}
}
@media(max-width:620px){
  .recipe-head-actions{display:grid;width:100%;grid-template-columns:1fr 1fr}
  .recipe-head-actions .soft-button,.recipe-head-actions .primary-button{width:100%;padding-inline:10px;font-size:.78rem}
  .recipe-editor-basics{grid-template-columns:1fr;padding:10px}
  .recipe-editor-title,.recipe-editor-tags{grid-column:auto}
  .recipe-editor-section,.recipe-stock-picker{border-radius:15px;padding:10px}
  .ingredient-editor-row{grid-template-columns:minmax(0,1fr) 78px 36px;gap:6px}
  .ingredient-editor-name{grid-column:1/-1}
  .ingredient-editor-row label:nth-of-type(2){grid-column:2}
  .ingredient-editor-row .ingredient-remove{grid-column:3;grid-row:2}
  .recipe-stock-scroll{max-height:240px}
  .recipe-stock-option{grid-template-columns:28px minmax(0,1fr) auto 16px;padding:7px}
  .method-editor-row{grid-template-columns:27px minmax(0,1fr) 34px;gap:6px}
  .method-editor-row>span{width:27px;height:27px}
  .recipe-editor-actions{position:sticky;bottom:-18px;z-index:3;margin:0 -18px -18px;background:#fff;padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
  .recipe-editor-actions button{flex:1}
  .modal-backdrop:has(.recipe-editor){align-items:stretch;padding:0}
  .modal:has(.recipe-editor){width:100%;height:100dvh;max-height:100dvh;border-radius:0;padding:16px 14px 92px}
  .modal:has(.recipe-editor)>header{position:sticky;z-index:5;top:-16px;margin:-16px -14px 14px;background:#fff;padding:16px 14px 12px;border-bottom:1px solid var(--line)}
}


/* v27 — searchable shopping list + persistent stock/cart state */
.shopping-search-toggle.active{background:var(--ink);color:#fff}
.shopping-search{display:flex;align-items:center;gap:9px;width:min(720px,100%);height:48px;margin:-6px 0 16px;border:1px solid var(--line);border-radius:15px;background:#fff;padding:0 10px 0 14px;color:#7d8178;box-shadow:0 4px 16px rgb(31 33 29/5%)}
.shopping-search>.ui-icon{--icon-size:18px;flex:0 0 auto}
.shopping-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--ink);font-size:.95rem}
.shopping-search button{display:grid;width:30px;height:30px;place-items:center;border-radius:999px;background:#f0eee8;color:#70746b}
.shopping-search button .ui-icon{--icon-size:14px}
.card-actions .shopping-card-button.active{background:var(--paprika);color:#fff;box-shadow:inset 0 0 0 1px rgb(126 39 19/10%)}
.card-actions .shopping-card-button.active:hover{background:#cf4c2b}
@media(max-width:620px){
  .shopping-title-actions{display:grid;width:100%;grid-template-columns:44px minmax(0,1fr);gap:8px}
  .shopping-title-actions .shopping-search-toggle{width:44px;height:42px}
  .shopping-title-actions .soft-button{min-width:0}
  .shopping-title-actions .primary-button{grid-column:1/-1;width:100%}
  .shopping-search{width:100%;height:44px;margin:-4px 0 14px}
}


/* v28 supermarket-style shopping order */
.shopping-list{gap:14px}
.shopping-group{display:grid;gap:8px}
.shopping-group-heading{display:flex;align-items:center;gap:8px;padding:2px 5px;color:var(--ink)}
.shopping-group-heading .category-glyph{width:27px;height:27px;min-width:27px;border-radius:9px}
.shopping-group-heading .category-glyph .ui-icon{--icon-size:15px}
.shopping-group-heading b{font-size:.75rem;font-weight:950;letter-spacing:.07em;text-transform:uppercase}
.shopping-group-heading small{margin-left:auto;color:var(--muted);font-size:.68rem;font-weight:800}
@media(max-width:620px){
  .shopping-list{gap:12px}
  .shopping-group{gap:7px}
  .shopping-group-heading{padding-inline:3px}
  .shopping-group-heading .category-glyph{width:25px;height:25px;min-width:25px}
}


/* v30 automatic recipe-title categories */
.recipe-topic-strip{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 12px;
  overflow-x:auto;
  padding:1px 1px 5px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.recipe-topic-strip::-webkit-scrollbar{display:none}
.recipe-topic-label{
  flex:0 0 auto;
  color:var(--muted);
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.recipe-topic-strip button{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  gap:7px;
  min-height:34px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  padding:0 10px 0 12px;
  color:var(--ink);
  font-size:.77rem;
  font-weight:850;
  white-space:nowrap;
}
.recipe-topic-strip button:hover{background:#f5f3ee}
.recipe-topic-strip button.active{
  border-color:var(--ink);
  background:var(--ink);
  color:#fff;
}
.recipe-topic-strip button small{
  display:grid;
  min-width:20px;
  height:20px;
  place-items:center;
  border-radius:999px;
  background:#f0eee8;
  color:var(--muted);
  font-size:.62rem;
  font-weight:900;
}
.recipe-topic-strip button.active small{background:rgb(255 255 255/15%);color:#fff}
.recipe-topic-active{margin-top:-2px}
@media(max-width:620px){
  .recipe-topic-strip{margin-inline:-10px;padding-inline:10px}
  .recipe-topic-label{position:sticky;left:0;z-index:1;background:var(--canvas);padding-right:3px}
}


/* v31 cook exclusions + compact preference controls */
.cook-exclusions{margin-bottom:14px;border:1px solid var(--line);border-radius:26px;background:#fff;padding:18px}
.cook-exclusions-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
.cook-exclusions-head h2{margin:0;font-family:"Arial Black",Impact,sans-serif;font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.045em}
.cook-exclusions-head p{max-width:760px;margin:6px 0 0;color:var(--muted);font-size:.84rem;line-height:1.5}
.cook-exclusions-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.avoidance-editor{min-width:0;border:1px solid var(--line);border-radius:18px;background:#faf9f5;padding:13px}
.avoidance-editor-head{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:start;gap:10px}
.avoidance-editor-head>span{display:grid;width:36px;height:36px;place-items:center;border-radius:11px;background:#f0eee8;color:var(--paprika)}
.avoidance-editor-head>span .ui-icon{--icon-size:18px}
.avoidance-editor h3{margin:1px 0 3px;font-size:.96rem}
.avoidance-editor-head p{margin:0;color:var(--muted);font-size:.75rem;line-height:1.4}
.avoidance-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 10px}
.avoidance-chips>span{display:inline-flex;align-items:center;gap:6px;max-width:100%;border:1px solid #edd1c8;border-radius:999px;background:#fff0eb;padding:5px 6px 5px 9px;color:#873a28;font-size:.74rem}
.avoidance-chips b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avoidance-chips button{display:grid;width:22px;height:22px;flex:0 0 22px;place-items:center;border-radius:999px;background:#fff;color:#8f4a38}
.avoidance-chips button .ui-icon{--icon-size:12px}
.avoidance-empty{margin:12px 0 10px;color:var(--muted);font-size:.74rem}
.avoidance-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}
.avoidance-add input{min-width:0;height:40px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:0 11px}
.avoidance-add .soft-button{min-height:40px;border-radius:12px;padding-inline:11px}
@media(max-width:700px){
  .cook-exclusions{padding:14px;border-radius:22px}
  .cook-exclusions-grid{grid-template-columns:1fr}
  .cook-exclusions-head{margin-bottom:11px}
  .avoidance-editor{padding:11px}
  .avoidance-add .soft-button{font-size:0;width:42px;padding:0}
  .avoidance-add .soft-button .ui-icon{--icon-size:17px}
}