*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#1a1a1a;--surface:#242424;--surface2:#2e2e2e;--border:#3a3a3a;--text:#f0f0f0;--muted:#888;--accent:#5a7a3a;--danger:#e57373;--checked-text:#555;--radius:8px;--font:-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}@media (prefers-color-scheme:light){:root{--bg:#f5f5f5;--surface:#fff;--surface2:#ebebeb;--border:#d4d4d4;--text:#1a1a1a;--muted:#888;--accent:#5a7a3a;--danger:#c62828;--checked-text:#aaa}}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--font);-webkit-tap-highlight-color:transparent;font-size:16px;overflow:hidden}#app{flex-direction:column;height:100%;display:flex;position:fixed;top:0;left:0;right:0}.view{flex-direction:column;height:100%;display:flex}header{background:var(--surface);border-bottom:1px solid var(--border);z-index:10;align-items:center;gap:8px;height:52px;padding:0 16px;display:flex;position:sticky;top:0}header h1{flex:1;font-size:1rem;font-weight:600}.btn{border-radius:var(--radius);font-size:.9rem;font-family:var(--font);cursor:pointer;background:var(--surface2);color:var(--text);-webkit-user-select:none;user-select:none;border:none;align-items:center;gap:6px;padding:8px 14px;transition:background .15s;display:inline-flex}.btn:active{background:var(--border)}.btn.primary{background:var(--accent);color:#fff}.btn.primary:active{filter:brightness(.85)}.btn.danger{background:var(--danger);color:#fff}.btn.icon-btn{background:0 0;padding:8px}.btn.icon-btn:active{background:var(--surface2)}.auth-view{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:24px;padding:32px 24px;display:flex}.auth-view h1{font-size:1.4rem}.auth-form{flex-direction:column;gap:12px;width:100%;max-width:320px;display:flex}.auth-form input{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface2);color:var(--text);font-size:.9rem;font-family:var(--font);width:100%;padding:8px 14px}.auth-form input:focus{border-color:var(--accent);outline:none}.auth-error{color:var(--danger);text-align:center;font-size:.85rem}.auth-hint{color:var(--muted);text-align:center;font-size:.8rem}.recent-groups{flex-direction:column;gap:8px;width:100%;max-width:320px;margin-top:8px;display:flex}.recent-group-row{align-items:center;gap:8px;display:flex}.recent-group-row .recent-group-btn,.recent-group-row input{flex:1;min-width:0}.recent-group-del{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:4px;flex-shrink:0;padding:4px 6px;font-size:1rem}.recent-group-del:active{background:var(--surface2)}.recent-groups-label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:.75rem}.recent-group-btn{justify-content:flex-start}.recent-group-btn.active{background:var(--accent);color:#fff;font-weight:600}.bottom-bar{background:var(--surface);border-top:1px solid var(--border);flex-shrink:0}.tab-bar{background:var(--surface);border-top:1px solid var(--border);flex-shrink:0;max-height:60px;display:flex;overflow:hidden}.tab-bar.keyboard-open{border-top-width:0;max-height:0}.tab-btn{color:var(--muted);font-size:.9rem;font-family:var(--font);cursor:pointer;background:0 0;border:none;border-top:2px solid #0000;flex:1;padding:13px 0;transition:color .15s,border-color .15s,background .15s}.tab-btn.active{background:var(--accent);color:#fff;border-top-color:#0000;font-weight:600}.add-area{padding:12px 16px;position:relative}.add-row{gap:8px;display:flex}.add-row input{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface2);color:var(--text);font-size:1rem;font-family:var(--font);flex:1;padding:10px 12px}.add-row input:focus{border-color:var(--accent);outline:none}.autocomplete-list{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;z-index:20;border-bottom:none;margin-bottom:-1px;position:absolute;bottom:100%;left:16px;right:72px;overflow:hidden}.autocomplete-list li{cursor:pointer;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;font-size:.95rem;list-style:none;display:flex}.autocomplete-list li.active,.autocomplete-list li:hover{background:var(--border)}.ac-already{color:var(--muted);flex-shrink:0;font-size:.75rem}.in-list-badge{color:var(--accent);flex-shrink:0;font-size:.75rem}.to-confirm-badge{color:#f59e0b;flex-shrink:0;font-size:.75rem}.item-row.in-list .item-name{color:var(--muted)}.row-actions{flex-shrink:0;gap:6px;display:flex}.doubt-btn{color:#f59e0b;border-color:#f59e0b}.doubt-btn:active{background:#f59e0b1f}.purchases-day-header{background:var(--surface2);border-top:1px solid var(--border);z-index:5;justify-content:space-between;align-items:center;padding:10px 16px;display:flex;position:sticky;top:0}.add-all-btn{padding:4px 10px;font-size:.8rem}.add-row input.duplicate-warn{border-color:var(--danger);transition:border-color .15s}.items-list{overscroll-behavior:contain;flex:1;padding:2px 0;scroll-padding-bottom:16px;overflow-y:auto}.item-row.shop:active{background:var(--border)}.item-row{border-bottom:1px solid var(--border);align-items:center;gap:8px;max-height:80px;padding:4px 12px;transition:background .1s;display:flex;overflow:hidden}.drag-handle{cursor:grab;color:var(--muted);touch-action:none;text-align:center;flex-shrink:0;width:24px;font-size:1rem}.drag-handle:active{cursor:grabbing}.item-name{cursor:text;flex:1;font-size:.95rem}.item-row.prep-row .item-name{flex:none}.row-spacer{flex:1}.item-name-input{min-width:0;font-size:.95rem;font-family:var(--font);background:var(--surface2);border:1px solid var(--accent);border-radius:var(--radius);color:var(--text);outline:none;flex:1;margin:-6px -8px;padding:6px 8px}.item-row.checked .item-name{color:var(--checked-text)}.check-btn{border:2px solid var(--border);cursor:pointer;background:0 0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;transition:background .15s,border-color .15s,transform .12s;display:flex}.check-btn.done{background:var(--accent);border-color:var(--accent);color:#fff}.check-btn.checking{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(1.5)}.check-btn.unchecking{border-color:var(--border);color:#0000;background:0 0;transform:scale(1.5)}@keyframes check-appear{0%{background:#5a7a3a73}to{background:0 0}}.item-row.check-flash{animation:.8s ease-out forwards check-appear}.tab-uncertain-count{color:#fff;background:#f59e0b;border-radius:9px;justify-content:center;align-items:center;min-width:18px;height:18px;margin-left:4px;padding:0 4px;font-size:.7rem;font-weight:700;display:inline-flex;position:relative;top:-1px}.uncertain-badge{color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;background:#f59e0b;border-radius:4px;flex-shrink:0;padding:2px 6px;font-size:.75rem;font-weight:600;position:relative;top:-1px}.uncertain-badge:active{background:#d97706}.quantity-badge,.duplicate-badge{color:var(--muted);background:var(--surface2);border:1px solid var(--border);-webkit-user-select:none;user-select:none;border-radius:4px;flex-shrink:0;padding:2px 5px;font-size:.75rem;font-weight:600;position:relative;top:-1px}.item-row.prep-row{padding:0;display:block;position:relative}.row-inner{background:var(--bg);z-index:1;align-items:center;gap:8px;min-height:44px;padding:4px 12px;transition:transform .25s ease-out;display:flex;position:relative}.del-hint{background:var(--danger);color:#fff;pointer-events:none;justify-content:center;align-items:center;width:72px;font-size:.8rem;font-weight:600;display:flex;position:absolute;top:0;bottom:0;right:0}.item-row.dragging .row-inner{background:var(--surface2)}.delete-toast{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);z-index:50;white-space:nowrap;align-items:center;gap:14px;padding:10px 16px;font-size:.9rem;display:flex;position:fixed;bottom:60px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #00000040}.delete-toast em{font-style:normal;font-weight:600}.undo-btn{color:var(--accent);cursor:pointer;font-size:.9rem;font-weight:600;font-family:var(--font);background:0 0;border:none;flex-shrink:0;padding:0}.del-btn{color:var(--muted);cursor:pointer;opacity:0;pointer-events:none;background:0 0;border:none;border-radius:4px;flex-shrink:0;padding:4px;font-size:1.1rem;transition:opacity .15s}.del-btn:active{background:var(--surface2)}@media (hover:hover) and (pointer:fine){.item-row:hover .row-inner{background:var(--surface2)}.item-row:hover .del-btn{opacity:1;pointer-events:auto}}.item-spacer{flex-shrink:0;width:28px}.item-row.dragging{background:var(--surface2);opacity:.6}.item-row.drop-before{border-top:2px solid var(--accent)}.item-row.drop-after{border-bottom:2px solid var(--accent)}@keyframes drop-confirm{0%{background:#6b9e3a}to{background:var(--bg)}}.row-inner.drop-confirm{animation:.6s ease-out forwards drop-confirm}.drop-sentinel{height:48px;list-style:none}.drop-sentinel.drop-before{border-top:2px solid var(--accent)}.notif-bar{z-index:9;border-top:1px solid #0003;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;font-size:.85rem;animation:.2s ease-out slide-up;display:flex;position:fixed;bottom:48px;left:0;right:0}.notif-bar.warning{color:#fff;background:#f59e0b}.notif-bar.danger{background:var(--danger);color:#fff}.notif-bar.success{color:#fff;background:#6b9e3a}.notif-bar.update{background:var(--surface2);border-top:1px solid var(--border);color:var(--text)}.notif-reload-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:6px;flex-shrink:0;padding:4px 12px;font-size:.85rem}@keyframes slide-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}.sync-dot{background:var(--muted);border-radius:50%;flex-shrink:0;width:8px;height:8px}.sync-dot.connected{background:var(--accent)}.sync-dot.degraded{background:#f59e0b}.sheet-backdrop{z-index:100;background:#00000080;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet{background:var(--surface);width:100%;padding:8px 0 env(safe-area-inset-bottom,16px);border-radius:16px 16px 0 0;animation:.2s ease-out slide-up}.sheet-item{text-align:left;width:100%;color:var(--text);font-size:1rem;font-family:var(--font);cursor:pointer;background:0 0;border:none;padding:16px 20px;display:block}.sheet-item:active:not(:disabled){background:var(--surface2)}.sheet-item.danger{color:var(--danger)}.sheet-item:disabled{color:var(--muted);cursor:default}.sheet-item.danger:disabled{color:var(--muted)}.sheet-divider{border:none;border-top:1px solid var(--border);margin:4px 0}.sheet-version{text-align:center;color:var(--muted);-webkit-user-select:all;user-select:all;padding:8px 0 4px;font-size:.75rem}@keyframes flash{0%{color:var(--accent)}to{color:var(--text)}}.flash{animation:.8s ease-out flash}.empty{color:var(--muted);text-align:center;flex:1;justify-content:center;align-items:center;padding:40px;font-size:.95rem;display:flex}@keyframes appear{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.item-row.appearing{animation:.25s ease-out appear}.item-row.leaving{opacity:0;pointer-events:none;border-bottom-width:0;max-height:0;padding-top:0;padding-bottom:0;transition:opacity .2s ease-out,max-height .25s ease-out,padding .2s ease-out,border-bottom-width .2s ease-out}.section-label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:8px 16px 4px;font-size:.75rem}