:root{--color-bg: #eeeeee;--color-primary: #2870b8;--color-primary-dark: #1e5caa;--color-primary-light: rgba(40, 112, 184, .1);--color-primary-mid: rgba(40, 112, 184, .18);--color-danger: #c0392b;--color-text: #1a1e28;--color-text-secondary: #5e6878;--color-separator: rgba(0, 0, 0, .07);--glass-blur: blur(40px) saturate(200%) brightness(107%);--radius-sm: 10px;--radius-md: 14px;--radius-lg: 22px;--font: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html{height:100%;-webkit-text-size-adjust:100%}body{height:100%;font-family:var(--font);font-size:16px;color:var(--color-text);background:#eee;overflow:hidden;position:fixed;width:100%}#root{height:100%}button{font-family:var(--font);cursor:pointer;border:none;background:none;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}input{font-family:var(--font)}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:linear-gradient(155deg,#f6f6f8,#eaeaef,#e8e8ee);z-index:-1}.glass{background:linear-gradient(145deg,#ffffffeb,#ffffffb8);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid rgba(255,255,255,.95);border-bottom-color:#ffffff8c;border-right-color:#ffffff8c;box-shadow:0 24px 64px #00000017,0 8px 24px #0000000f,0 2px 8px #0000000a,inset 0 2px #fff,inset 0 0 0 1px #ffffff59}.app{display:flex;flex-direction:column;height:100%;max-width:480px;margin:0 auto}.header{flex-shrink:0;z-index:100;padding:14px 16px 0;padding-top:max(14px,env(safe-area-inset-top));background:linear-gradient(180deg,#fffffff5,#ffffffd6);backdrop-filter:blur(48px) saturate(220%);-webkit-backdrop-filter:blur(48px) saturate(220%);border-bottom:1px solid rgba(255,255,255,.6);box-shadow:0 1px #ffffffe6,0 6px 24px #00000012,inset 0 -1px #0000000d}.header-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.app-title{font-size:21px;font-weight:700;letter-spacing:-.4px;color:var(--color-text)}.header-right{display:flex;align-items:center;gap:10px}.sync-dot{width:8px;height:8px;border-radius:50%;background:var(--color-primary);opacity:.45;transition:opacity .3s,background .3s;flex-shrink:0}.sync-dot.syncing{opacity:1;animation:pulse-dot 1s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.25}}.manage-icon-btn{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);background:#0000000f;box-shadow:inset 0 1px 2px #00000014,0 1px #fffc;transition:all .15s ease}.manage-icon-btn:active,.manage-icon-btn.active{background:var(--color-primary-mid);color:var(--color-primary)}.manage-icon-btn svg{width:17px;height:17px}.list-pills-row{display:flex;gap:7px;overflow-x:auto;padding:4px 16px 12px;margin:0 -16px;scrollbar-width:none}.list-pills-row::-webkit-scrollbar{display:none}.list-pill{flex-shrink:0;padding:5px 15px;border-radius:20px;font-size:14px;font-weight:500;color:var(--color-text-secondary);background:#0000000d;border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1px 2px #0000000f,0 1px #ffffffe6;transition:all .16s ease}.list-pill.active{background:linear-gradient(160deg,#4292e4,#1e60b0);border-color:#ffffff4d;color:#fff;font-weight:600;box-shadow:0 4px 14px #2870b866,inset 0 1px #ffffff4d}.list-pill:active:not(.active){background:#00000017}.main-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:480px;display:flex;align-items:center;justify-content:space-around;padding:10px 0 calc(10px + env(safe-area-inset-bottom));background:linear-gradient(0deg,#fffffff5,#ffffffd6);backdrop-filter:blur(48px) saturate(220%);-webkit-backdrop-filter:blur(48px) saturate(220%);border-top:1px solid rgba(255,255,255,.6);box-shadow:0 -1px #ffffffe6,0 -6px 24px #00000012,inset 0 1px #0000000a;z-index:100}.nav-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 40px;color:var(--color-text-secondary);font-size:10px;font-weight:500;transition:color .16s ease}.nav-btn.active{color:var(--color-primary)}.nav-btn svg{width:24px;height:24px;transition:transform .13s ease}.nav-btn:active svg{transform:scale(.88)}.combined-view{display:flex;flex-direction:column;padding-bottom:calc(80px + env(safe-area-inset-bottom))}.sticky-add-bar{position:sticky;top:12px;z-index:50;margin:12px 14px 0;border-radius:var(--radius-lg)}.add-input-row{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 16px}.item-input{flex:1;font-size:17px;color:var(--color-text);background:transparent;border:none;outline:none;caret-color:var(--color-primary);min-width:0}.item-input::placeholder{color:#5e687873}.add-btn{flex-shrink:0;padding:8px 18px;border-radius:20px;background:linear-gradient(160deg,#4292e4,#1e60b0);color:#fff;font-size:15px;font-weight:600;transition:all .14s ease;box-shadow:0 4px 16px #2870b861,0 1px 4px #2870b840,inset 0 1px #ffffff40}.add-btn:disabled{opacity:.35;box-shadow:none}.add-btn:active:not(:disabled){transform:scale(.94);opacity:.88}.suggestions{border-top:1px solid var(--color-separator)}.suggestion-item{display:block;width:100%;text-align:left;padding:12px 16px;font-size:15px;color:var(--color-text);border-bottom:1px solid var(--color-separator);transition:background .1s}.suggestion-item:last-child{border-bottom:none}.suggestion-item:active{background:#0000000a}.list-section{padding:12px 14px 0}.groups-section{padding:16px 14px}.section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--color-text-secondary);margin-bottom:10px;padding:0 2px}.group-pill-row{display:flex;flex-wrap:wrap;gap:8px}.group-pill{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:20px;font-size:14px;font-weight:500;color:var(--color-primary);background:linear-gradient(145deg,#ffffffe6,#ffffffb3);border:1px solid rgba(255,255,255,.95);box-shadow:0 3px 10px #00000012,inset 0 1px #fff;transition:all .14s ease}.group-pill:active{transform:scale(.96);opacity:.8}.group-pill-count{font-size:11px;opacity:.6;font-weight:400}.url-toggle-btn{flex-shrink:0;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#0000000f;color:var(--color-text-secondary);box-shadow:inset 0 1px 2px #00000014,0 1px #ffffffe6;transition:all .14s ease}.url-toggle-btn svg{width:15px;height:15px}.url-toggle-btn.active{background:var(--color-primary-light);color:var(--color-primary)}.url-toggle-btn:active{transform:scale(.92)}.url-input-row{display:flex;align-items:center;gap:8px;padding:8px 12px 9px 14px;border-top:1px solid var(--color-separator)}.url-input-icon{flex-shrink:0;color:var(--color-text-secondary);display:flex}.url-input-icon svg{width:14px;height:14px}.url-input{flex:1;font-size:14px;color:var(--color-text);background:transparent;border:none;outline:none;caret-color:var(--color-primary);min-width:0}.url-input::placeholder{color:#5e687873}.items-card{border-radius:var(--radius-lg);overflow:hidden}.grocery-item{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid rgba(0,0,0,.055);min-height:50px;animation:item-in .18s ease}.grocery-item:last-child{border-bottom:none}.grocery-item.is-checked{opacity:.42}.grocery-item.is-checked .item-name{text-decoration:line-through}@keyframes item-in{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.item-check-btn{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;background:#eee;box-shadow:inset 0 1px 3px #0000001f,0 1px #ffffffe6;transition:all .14s ease}.item-check-btn.checked{background:linear-gradient(160deg,#4292e4,#1e60b0);border-color:transparent;box-shadow:0 3px 10px #2870b866,inset 0 1px #ffffff40}.item-check-btn:active{transform:scale(.88)}.item-qty-col{flex-shrink:0;width:30px;text-align:right;font-size:12px;font-weight:700;color:var(--color-primary);letter-spacing:-.2px;margin-right:2px}.item-name{flex:1;font-size:16px;color:var(--color-text);line-height:1.25;word-break:break-word}.item-weight{font-size:13px;color:var(--color-text-secondary);font-weight:400}.item-link-btn{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#ffffffe6,#ffffffb3);color:var(--color-primary);text-decoration:none;border:1px solid rgba(255,255,255,.9);box-shadow:0 2px 6px #2870b82e,inset 0 1px #fff;transition:all .13s ease;cursor:pointer}.item-link-btn svg{width:13px;height:13px}.item-link-btn:active{transform:scale(.9)}.item-del-btn{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:#0000000f;color:var(--color-text-secondary);font-size:17px;font-weight:300;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 2px #00000014,0 1px #ffffffe6;transition:all .13s ease}.item-del-btn:active{background:#c0392b1f;color:var(--color-danger);transform:scale(.9)}.checked-divider{display:flex;align-items:center;justify-content:space-between;padding:9px 14px 8px;border-bottom:1px solid var(--color-separator)}.checked-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--color-text-secondary)}.clear-btn{font-size:13px;font-weight:500;color:var(--color-danger)}.empty-state{display:flex;flex-direction:column;align-items:center;padding:56px 32px;text-align:center;gap:6px}.empty-icon{font-size:44px;margin-bottom:8px}.empty-title{font-size:18px;font-weight:600;color:var(--color-text)}.empty-sub{font-size:15px;color:var(--color-text-secondary)}.manage-panel{display:flex;flex-direction:column;gap:22px}.manage-panel-scroll{padding:16px 14px calc(90px + env(safe-area-inset-bottom))}.manage-card{border-radius:var(--radius-lg);overflow:hidden}.manage-row{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid var(--color-separator);min-height:50px}.manage-row:last-of-type{border-bottom:none}.manage-row-name{font-size:16px;color:var(--color-text)}.active-badge{font-size:11px;color:var(--color-primary);font-weight:600;margin-left:6px}.delete-text-btn{font-size:14px;font-weight:500;color:var(--color-danger);padding:4px 6px}.manage-input-row{display:flex;align-items:center;gap:8px;padding:9px 10px 9px 15px;border-top:1px solid var(--color-separator)}.manage-input{flex:1;font-size:16px;color:var(--color-text);background:transparent;border:none;outline:none;min-width:0}.manage-input::placeholder{color:#5e687880}.create-btn{flex-shrink:0;padding:7px 17px;border-radius:18px;background:linear-gradient(160deg,#4292e4,#1e60b0);color:#fff;font-size:14px;font-weight:600;transition:all .13s ease;box-shadow:0 3px 10px #2870b859,inset 0 1px #fff3}.create-btn:disabled{opacity:.36;box-shadow:none}.create-btn:active:not(:disabled){transform:scale(.94);opacity:.85}.group-manage-card{border-radius:var(--radius-lg);overflow:hidden;margin-bottom:10px}.group-manage-header{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;cursor:pointer;user-select:none;-webkit-user-select:none}.group-meta{display:flex;flex-direction:column;gap:1px}.group-name{font-size:16px;font-weight:600;color:var(--color-text)}.group-item-count{font-size:12px;color:var(--color-text-secondary)}.group-manage-right{display:flex;align-items:center;gap:10px}.chevron{color:var(--color-text-secondary);font-size:20px;font-weight:300;line-height:1;display:inline-block;transition:transform .18s ease}.chevron.open{transform:rotate(90deg)}.group-edit-body{border-top:1px solid var(--color-separator)}.group-items-edit{padding:6px 15px 2px}.group-item-edit-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;font-size:15px;color:var(--color-text);border-bottom:1px solid var(--color-separator)}.group-item-edit-row:last-child{border-bottom:none}.remove-btn{width:22px;height:22px;border-radius:50%;background:#c0392b1a;color:var(--color-danger);font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .13s ease}.remove-btn:active{background:#c0392b33;transform:scale(.9)}.section{display:flex;flex-direction:column;gap:10px}.section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--color-text-secondary);padding:0 4px}.loading-screen,.error-screen,.welcome-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;background:transparent;padding:40px 32px;gap:12px;text-align:center}.error-title,.welcome-title{color:var(--color-text)}.error-msg,.welcome-sub{color:var(--color-text-secondary)}.spinner{width:32px;height:32px;border:3px solid rgba(40,112,184,.18);border-top-color:var(--color-primary);border-radius:50%;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-title{font-size:18px;font-weight:600}.error-msg{font-size:14px;line-height:1.5}.retry-btn{margin-top:8px;padding:10px 28px;border-radius:22px;background:linear-gradient(160deg,#4292e4,#1e60b0);color:#fff;font-size:15px;font-weight:600;box-shadow:0 4px 16px #2870b859}.welcome-icon{font-size:52px}.welcome-title{font-size:26px;font-weight:700;letter-spacing:-.4px}.welcome-sub{margin-bottom:16px;line-height:1.5;font-size:15px}.welcome-input-row{display:flex;gap:8px;width:100%;max-width:320px}.welcome-input{flex:1;padding:11px 14px;border-radius:var(--radius-md);background:linear-gradient(145deg,#ffffffeb,#ffffffbf);border:1px solid rgba(255,255,255,.95);box-shadow:0 4px 16px #00000014,inset 0 1px #fff;font-size:16px;color:var(--color-text);outline:none}.welcome-input:focus{border-color:#2870b880;box-shadow:0 0 0 3px #2870b81f,0 4px 16px #00000014}.welcome-create-btn{padding:11px 20px;border-radius:var(--radius-md);background:linear-gradient(160deg,#4292e4,#1e60b0);color:#fff;font-size:15px;font-weight:600;flex-shrink:0;box-shadow:0 4px 14px #2870b861,inset 0 1px #fff3;transition:all .14s ease}.welcome-create-btn:active{opacity:.85;transform:scale(.97)}@media (min-width: 768px){body{overflow:hidden;position:fixed}.app{max-width:100%;height:100vh;display:grid;grid-template-rows:auto 1fr}.header{max-width:100%;border-left:none;border-right:none}.desktop-body{display:grid;grid-template-columns:340px 1fr;height:100%;overflow:hidden}.desktop-sidebar{border-right:1px solid rgba(0,0,0,.06);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:36px 16px 20px;display:flex;flex-direction:column;gap:18px;background:#ffffff40}.desktop-main{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:24px}.sidebar-add-card{border-radius:var(--radius-lg);overflow:visible;position:relative}.sidebar-input-row{display:flex;align-items:center;gap:8px;padding:12px 10px 12px 15px}.sidebar-suggestions{border-top:1px solid var(--color-separator);overflow:hidden;position:absolute;left:0;right:0;background:#fffffffa;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.95);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg);box-shadow:0 12px 32px #0000001a;z-index:50}.sidebar-group-card{border-radius:var(--radius-lg);overflow:hidden;margin-bottom:8px}.sidebar-group-header{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;cursor:pointer;-webkit-user-select:none;user-select:none}.sidebar-group-items{display:flex;flex-wrap:wrap;gap:5px;padding:10px 14px 12px;border-top:1px solid var(--color-separator)}.group-item-tag{padding:3px 9px;border-radius:10px;background:#0000000d;font-size:12px;color:var(--color-text-secondary)}.add-all-btn{padding:6px 13px;border-radius:18px;background:linear-gradient(160deg,#4292e4,#1e60b0);color:#fff;font-size:13px;font-weight:600;transition:all .13s ease;box-shadow:0 3px 10px #2870b852,inset 0 1px #fff3;flex-shrink:0}.add-all-btn:active{transform:scale(.94);opacity:.85}.add-all-btn:disabled{opacity:.35;box-shadow:none}.bottom-nav,.mobile-only{display:none}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0003;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:200;animation:fade-in .18s ease}.manage-modal{position:fixed;top:0;right:0;bottom:0;width:380px;z-index:201;display:flex;flex-direction:column;border-radius:var(--radius-lg) 0 0 var(--radius-lg);overflow:hidden;animation:slide-in-right .22s ease;background:linear-gradient(145deg,#fffffff5,#ffffffe0);backdrop-filter:blur(48px) saturate(200%);-webkit-backdrop-filter:blur(48px) saturate(200%);border:1px solid rgba(255,255,255,.95);border-right:none;box-shadow:-12px 0 48px #0000001f,inset 2px 0 #fff}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--color-separator);flex-shrink:0}.modal-title{font-size:18px;font-weight:700}.modal-close-btn{width:30px;height:30px;border-radius:50%;background:#00000012;color:var(--color-text-secondary);font-size:20px;font-weight:300;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 2px #00000014,0 1px #ffffffe6;transition:all .13s ease}.modal-close-btn:active{background:#0000001f}.modal-body{flex:1;overflow-y:auto;padding:16px 20px}}