:root,[data-theme=light]{--bg: #f6f8fa;--bg-2: #ffffff;--bg-3: #f0f3f6;--fg: #1f2328;--fg-2: #57606a;--fg-3: #8c959f;--accent: #0969da;--accent-2: #0969da;--ok: #1a7f37;--warn: #9a6700;--danger: #cf222e;--border: #d0d7de;--shadow: 0 1px 2px rgba(0,0,0,.04);--radius: .5rem;color-scheme:light;--ok-bg: #dafbe1;--warn-bg: #fff8c5;--danger-bg: #ffebe9;--accent-bg: #ddf4ff}[data-theme=dark]{--bg: #0e1116;--bg-2: #161b22;--bg-3: #1c2128;--fg: #e4e6eb;--fg-2: #adb5bd;--fg-3: #6b7280;--accent: #79b8ff;--accent-2: #1f6feb;--ok: #56d364;--warn: #f0c674;--danger: #f97583;--border: #30363d;--shadow: 0 1px 2px rgba(0,0,0,.4);color-scheme:dark;--ok-bg: rgba(86, 211, 100, .15);--warn-bg: rgba(240, 198, 116, .15);--danger-bg: rgba(249, 117, 131, .15);--accent-bg: rgba(121, 184, 255, .12)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--fg);overscroll-behavior-y:contain}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}.app{max-width:720px;margin:0 auto;min-height:100%;display:flex;flex-direction:column}.app-header{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--bg-2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}.app-header h1{margin:0;font-size:1.05rem}.app-header .spacer{flex:1}.app-header .header-logo{width:32px;height:32px;border-radius:.35rem;flex-shrink:0}.menu-wrapper{position:relative}.menu{position:absolute;top:calc(100% + .35rem);right:0;min-width:220px;max-width:90vw;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 6px 18px #00000040;padding:.35rem;z-index:50}.menu-user{padding:.55rem .65rem .45rem;border-bottom:1px solid var(--border);margin-bottom:.25rem;color:var(--fg-2);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.menu-item{display:flex;align-items:center;gap:.55rem;width:100%;padding:.6rem .65rem;background:transparent;border:0;color:var(--fg);font:inherit;font-size:.9rem;text-align:left;text-decoration:none;border-radius:.35rem;cursor:pointer}.menu-item:hover{background:var(--bg-3)}.menu-item--danger{color:var(--danger)}.menu-ic{width:22px;text-align:center;font-size:1rem}.app-main{flex:1;padding:1rem 1rem 5rem}.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--bg-2);border-top:1px solid var(--border);display:flex;padding-bottom:env(safe-area-inset-bottom);max-width:720px;margin:0 auto}.bottom-nav a{flex:1;text-align:center;padding:.7rem .25rem;color:var(--fg-2);font-size:.8rem}.bottom-nav a.active{color:var(--accent)}.bottom-nav a .ic{display:block;font-size:1.3rem;margin-bottom:.15rem}.card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;margin-bottom:.75rem}.item-card{background:var(--bg-2);border:1px solid var(--border);border-left:4px solid var(--fg-3);border-radius:var(--radius);padding:.65rem .8rem;margin-bottom:.5rem;display:flex;flex-direction:column;gap:.55rem}.item-card.expiry-danger{border-left-color:var(--danger)}.item-card.expiry-warn{border-left-color:var(--warn)}.item-card.expiry-soon{border-left-color:#d99a00}.item-card.expiry-ok{border-left-color:var(--ok)}.item-card .item-top{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}.item-card .item-top>.item-actions-inline{flex-basis:100%;display:flex;align-items:center;gap:.4rem;padding-left:calc(48px + .65rem);justify-content:space-between}.item-card .item-img{width:48px;height:48px;border-radius:.4rem;background:var(--bg-3);object-fit:cover;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.4rem}.item-card .item-name{font-size:.95rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-card .item-meta{font-size:.78rem;color:var(--fg-2);margin-top:.1rem}.item-card .item-meta .expiry{font-weight:600}.item-card .item-meta .expiry.danger{color:var(--danger)}.item-card .item-meta .expiry.warn{color:var(--warn)}.item-card .item-meta .expiry.soon{color:#d99a00}.item-card .item-meta .expiry.ok{color:var(--ok)}.item-card .item-actions{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.stepper{display:flex;align-items:center;gap:.35rem;flex-shrink:0}.stepper button{width:30px;height:30px;border-radius:50%;border:2px solid currentColor;background:transparent;font-weight:800;font-size:1.05rem;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.stepper button.minus{color:var(--danger)}.stepper button.plus{color:var(--ok)}.stepper button.minus:hover{background:var(--danger-bg)}.stepper button.plus:hover{background:var(--ok-bg)}.stepper button:disabled{opacity:.35;cursor:default}.stepper button:disabled:hover{background:transparent}.stepper .count{min-width:32px;text-align:center;line-height:1.05;display:flex;flex-direction:column}.stepper .count .n{font-weight:700;font-size:.95rem}.stepper .count .u{font-size:.6rem;color:var(--fg-3)}.row-icons{display:flex;gap:.1rem;flex-shrink:0}.row-icons .btn-icon{padding:.25rem .35rem;font-size:1rem}.row-icons .btn-icon.shop{color:var(--ok)}.row-icons .btn-icon.edit{color:var(--fg-2)}.row-icons .btn-icon.del{color:var(--danger)}.card-row{display:flex;align-items:center;gap:.75rem}.card-row .grow{flex:1;min-width:0}.card h3{margin:0 0 .25rem;font-size:1rem}.card .meta{font-size:.8rem;color:var(--fg-2)}.form{display:flex;flex-direction:column;gap:.9rem}.field{display:flex;flex-direction:column;gap:.3rem}.field label{font-size:.8rem;color:var(--fg-2)}.field input,.field select,.field textarea{background:var(--bg-3);color:var(--fg);border:1px solid var(--border);border-radius:var(--radius);padding:.65rem .8rem;font:inherit}.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent-2);outline-offset:-1px}.field-row{display:flex;gap:.5rem}.field-row .field{flex:1}.btn{background:var(--accent-2);color:#fff;border:0;border-radius:var(--radius);padding:.7rem 1.1rem;font:inherit;font-weight:600;cursor:pointer}.btn:hover{filter:brightness(1.1)}.btn:disabled{opacity:.5;cursor:default}.btn-ghost{background:transparent;color:var(--fg);border:1px solid var(--border)}.btn-danger{background:#b91c1c}.btn-small{padding:.4rem .7rem;font-size:.85rem}.btn-icon{background:transparent;color:var(--fg-2);border:0;cursor:pointer;padding:.35rem;font-size:1.1rem}.tabs{display:flex;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:1rem}.tabs button{flex:1;padding:.65rem;background:transparent;color:var(--fg-2);border:0;font:inherit;cursor:pointer}.tabs button.active{background:var(--accent-2);color:#fff}.auth-screen{max-width:380px;margin:3rem auto 0;padding:0 1rem}.auth-screen h1{font-size:1.4rem;margin-bottom:.25rem}.auth-screen p.sub{color:var(--fg-2);margin-top:0;margin-bottom:1.5rem}.auth-screen .form{gap:.85rem}.auth-screen .switch{text-align:center;margin-top:1.2rem;font-size:.9rem;color:var(--fg-2)}.badge{display:inline-block;padding:.15rem .5rem;font-size:.75rem;border-radius:.3rem;background:var(--bg-3);color:var(--fg-2)}.badge.ok{background:var(--ok-bg);color:var(--ok)}.badge.warn{background:var(--warn-bg);color:var(--warn)}.badge.danger{background:var(--danger-bg);color:var(--danger)}.alert{padding:.7rem .9rem;border-radius:var(--radius);background:var(--danger-bg);color:var(--danger);border:1px solid var(--border);margin-bottom:1rem;font-size:.9rem}.alert.info{background:var(--accent-bg);color:var(--accent)}.alert.ok{background:var(--ok-bg);color:var(--ok)}.empty{text-align:center;padding:3rem 1rem;color:var(--fg-3)}.alert-strip{width:100%;border:none;cursor:pointer;background:var(--danger);color:#fff;padding:.55rem .9rem;border-radius:var(--radius);font-size:.85rem;font-weight:700;display:flex;align-items:center;gap:.65rem;margin-bottom:.6rem}.alert-strip__plus{margin-left:auto;width:20px;height:20px;border-radius:50%;border:1.5px solid #fff;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:800;line-height:1}.alert-expanded{position:relative;background:var(--danger-bg);border:1px solid var(--border);border-radius:var(--radius);padding:.65rem .9rem;margin-bottom:.6rem}.alert-expanded__min{position:absolute;top:.3rem;right:.4rem;background:transparent;border:0;cursor:pointer;color:var(--danger);font-size:1.1rem;padding:.1rem .4rem}.alert-expanded__title{font-size:.8rem;font-weight:700;color:var(--danger);margin-bottom:.35rem;padding-right:1.5rem}.alert-expanded__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.15rem;font-size:.8rem}.alert-expanded__list .expiry.danger{color:var(--danger)}.alert-expanded__list .expiry.soon{color:#d99a00}.alert-expanded__list .expiry.warn{color:var(--warn)}.ingredient-pool{position:relative;margin-bottom:.75rem}.ingredient-pool:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2rem;background:linear-gradient(to bottom,transparent,var(--bg-2));pointer-events:none;border-radius:0 0 var(--radius) var(--radius)}.ingredient-pool__inner{display:flex;flex-wrap:wrap;gap:.35rem;max-height:11rem;overflow-y:scroll;padding-bottom:1.5rem;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.ingredient-pool__inner::-webkit-scrollbar{width:6px}.ingredient-pool__inner::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.ingredient-pool__inner::-webkit-scrollbar-track{background:transparent}.fab{position:fixed;bottom:5.5rem;right:max(1rem,calc(50vw - 360px + 1rem));width:56px;height:56px;border-radius:50%;background:var(--accent-2);color:#fff;border:0;font-size:1.6rem;cursor:pointer;box-shadow:0 4px 12px #00000080;z-index:5}.scanner{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000f2;z-index:100;display:flex;flex-direction:column}.scanner video{flex:1;width:100%;object-fit:cover}.scanner .controls{background:var(--bg-2);padding:1rem;display:flex;gap:.5rem}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;z-index:50;display:flex;align-items:flex-end;justify-content:center}.modal{background:var(--bg-2);border-radius:var(--radius) var(--radius) 0 0;width:100%;max-width:720px;max-height:92vh;overflow-y:auto;padding:1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom))}.modal h2{margin:0 0 1rem;font-size:1.1rem}@media (min-width: 640px){.modal-overlay{align-items:center}.modal{border-radius:var(--radius);max-width:500px}}
