*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--primary: #16a34a;--primary-dark: #15803d;--on-primary: #ffffff;--primary-container: #dcfce7;--on-primary-container: #052e16;--surface: #f6f8f6;--surface-1: #ffffff;--surface-2: #f0fdf4;--on-surface: #1a1c19;--on-surface-variant: #6b7280;--outline: #d1d5db;--outline-variant: #e5e7eb;--error: #dc2626;--error-container: #fef2f2;--radius-sm: 6px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-pill: 999px;--shadow-1: 0 1px 2px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.05);--shadow-2: 0 2px 6px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.06);--shadow-3: 0 4px 12px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.07);font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--on-surface);background:var(--surface)}body{min-height:100dvh}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}input,select,textarea{font-family:inherit;font-size:1rem;color:var(--on-surface);background:var(--surface-1);border:1.5px solid var(--outline);border-radius:var(--radius-md);padding:.625rem .875rem;width:100%;transition:border-color .15s,box-shadow .15s;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px #16a34a1f}button{font-family:inherit;font-size:.875rem;font-weight:500;letter-spacing:.02em;border:none;border-radius:var(--radius-md);padding:.625rem 1.25rem;cursor:pointer;transition:background .15s,box-shadow .15s,transform .1s;background:var(--primary);color:var(--on-primary)}button:active{transform:scale(.97)}button:disabled{opacity:.45;cursor:not-allowed;transform:none}.page{max-width:600px;margin:0 auto;padding-bottom:2rem}.app-bar{position:sticky;top:0;z-index:10;background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-2);padding:0 1rem;height:64px;display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}.app-bar .app-bar-back{color:var(--on-primary);font-size:1.25rem;padding:.375rem;border-radius:var(--radius-pill);background:transparent;opacity:.9}.app-bar .app-bar-back:hover{opacity:1;background:#ffffff26}.app-bar .app-bar-back:active{transform:none}.app-bar h1{flex:1;font-size:1.25rem;font-weight:600;color:var(--on-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-bar .app-bar-action{background:#ffffff26;color:var(--on-primary);padding:.4rem .875rem;border-radius:var(--radius-pill);font-size:.8rem;font-weight:500}.app-bar .app-bar-action:hover{background:#ffffff40}.auth-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh;padding:1.5rem;gap:1.5rem}.auth-page .auth-logo{display:flex;align-items:center;gap:.625rem}.auth-page .auth-logo .logo-icon{width:44px;height:44px;background:var(--primary);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.25rem;box-shadow:var(--shadow-2)}.auth-page .auth-logo h1{font-size:1.5rem;font-weight:700;color:var(--on-surface)}.card{background:var(--surface-1);border-radius:var(--radius-xl);box-shadow:var(--shadow-2);padding:1.75rem;width:min(400px,100%)}.tabs{display:flex;background:var(--surface);border-radius:var(--radius-lg);padding:4px;margin-bottom:1.5rem;gap:4px}.tabs button{flex:1;padding:.5rem;border-radius:var(--radius-md);background:transparent;color:var(--on-surface-variant);font-size:.875rem;font-weight:500}.tabs button.active{background:var(--surface-1);color:var(--primary);box-shadow:var(--shadow-1)}.form-field{display:flex;flex-direction:column;gap:.375rem;margin-bottom:1rem}.form-field label{font-size:.8rem;font-weight:500;color:var(--on-surface-variant);letter-spacing:.02em}.btn-primary{width:100%;padding:.75rem;border-radius:var(--radius-lg);font-size:.9375rem;font-weight:600;margin-top:.5rem;box-shadow:var(--shadow-1)}.error-msg{display:flex;align-items:center;gap:.375rem;color:var(--error);background:var(--error-container);border-radius:var(--radius-md);padding:.625rem .875rem;font-size:.875rem;margin-bottom:.75rem}.lists-page{padding:0 1rem}.create-form{display:flex;gap:.5rem;margin-bottom:1.5rem}.create-form input{flex:1}.create-form button{padding:.625rem 1rem;border-radius:var(--radius-md);font-size:1.25rem;line-height:1;flex-shrink:0;box-shadow:var(--shadow-1)}.list-cards{display:flex;flex-direction:column;gap:.625rem}.list-card{display:flex;align-items:center;background:var(--surface-1);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding:1rem 1.125rem;transition:box-shadow .15s}.list-card:hover{box-shadow:var(--shadow-2)}.list-card a{flex:1;font-weight:500;font-size:1rem;color:var(--on-surface)}.list-card a:hover{text-decoration:none}.list-card .btn-icon-danger{background:transparent;color:var(--on-surface-variant);padding:.375rem;border-radius:var(--radius-pill);font-size:1.1rem;opacity:.6}.list-card .btn-icon-danger:hover{background:var(--error-container);color:var(--error);opacity:1}.list-card .btn-icon-danger:active{transform:none}.empty-state{text-align:center;padding:3rem 1rem;color:var(--on-surface-variant)}.empty-state p{font-size:.9375rem}.add-form-wrap{padding:0 1rem;margin-bottom:1rem}.add-form-main{display:flex;gap:.5rem;align-items:stretch}.add-form-main input{flex:1;border-radius:var(--radius-lg);background:var(--surface-1);box-shadow:var(--shadow-1);border-color:transparent}.add-form-main input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #16a34a1f}.add-form-main .btn-toggle-details{background:var(--surface-1);color:var(--on-surface-variant);border:1.5px solid var(--outline);border-radius:var(--radius-lg);padding:0 .875rem;font-size:.75rem;flex-shrink:0}.add-form-main .btn-toggle-details:hover{background:var(--surface-2);color:var(--primary);border-color:var(--primary)}.add-form-main .btn-add{background:var(--primary);color:#fff;border-radius:var(--radius-lg);padding:0 1.125rem;font-size:1.5rem;line-height:1;flex-shrink:0;box-shadow:var(--shadow-2)}.add-form-details{background:var(--surface-1);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding:1rem;margin-top:.5rem;display:flex;flex-direction:column;gap:.875rem}.add-form-details .detail-row{display:flex;gap:.5rem}.add-form-details .detail-row input{flex:1;font-size:.9rem}.add-form-details .detail-field{display:flex;flex-direction:column;gap:.375rem}.add-form-details .detail-field label{font-size:.75rem;font-weight:500;color:var(--on-surface-variant)}.add-form-details .detail-field select{font-size:.9rem}.tag-picker{display:flex;flex-wrap:wrap;gap:.375rem}.chip{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .75rem;border-radius:var(--radius-pill);font-size:.8rem;font-weight:500;background:var(--surface);color:var(--on-surface-variant);border:1.5px solid var(--outline);cursor:pointer;transition:background .12s,border-color .12s,color .12s}.chip.active{background:var(--primary-container);color:var(--on-primary-container);border-color:var(--primary)}.checkout-bar{display:flex;align-items:center;justify-content:space-between;background:var(--primary-container);border-radius:var(--radius-lg);padding:.75rem 1.125rem;margin:0 1rem .75rem;font-size:.875rem;color:var(--on-primary-container);font-weight:500}.checkout-bar button{background:var(--primary);color:#fff;padding:.375rem .875rem;border-radius:var(--radius-pill);font-size:.8rem;box-shadow:var(--shadow-1)}.list-section{padding:0 1rem;margin-bottom:.25rem}.section-label{display:flex;align-items:center;gap:.5rem;padding:.625rem .25rem .375rem}.section-label span{flex:1;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--on-surface-variant)}.section-label .btn-icon-danger{background:transparent;color:var(--on-surface-variant);padding:.2rem .4rem;border-radius:var(--radius-sm);font-size:.8rem;opacity:.5}.section-label .btn-icon-danger:hover{opacity:1;color:var(--error);background:var(--error-container)}.section-label .btn-icon-danger:active{transform:none}.items{list-style:none;display:flex;flex-direction:column;gap:3px;padding:0 1rem;margin-bottom:.5rem}.items li{background:var(--surface-1);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-1);transition:box-shadow .15s}.items li:hover{box-shadow:var(--shadow-2)}.items li.checked{opacity:.55}.items li.checked .item-name{text-decoration:line-through;color:var(--on-surface-variant)}.item-main{display:flex;align-items:center;gap:.625rem;padding:.75rem .875rem}.check-btn{width:26px;height:26px;border-radius:var(--radius-pill);border:2px solid var(--outline);background:transparent;color:var(--primary);font-size:.8rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;transition:background .15s,border-color .15s}.check-btn:active{transform:none}li.checked .check-btn{background:var(--primary);border-color:var(--primary);color:#fff}.item-name{flex:1;font-size:.9375rem}.item-qty{font-size:.8rem;color:var(--on-surface-variant);background:var(--surface);padding:.15rem .5rem;border-radius:var(--radius-pill)}.item-tag{font-size:.72rem;font-weight:500;background:var(--primary-container);color:var(--on-primary-container);padding:.15rem .5rem;border-radius:var(--radius-pill)}.btn-edit{background:transparent;color:var(--on-surface-variant);padding:.25rem .4rem;border-radius:var(--radius-md);font-size:.875rem;opacity:.55}.btn-edit:hover{opacity:1;background:var(--surface)}.btn-edit:active{transform:none}.btn-delete{background:transparent;color:var(--on-surface-variant);padding:.25rem .4rem;border-radius:var(--radius-md);font-size:1rem;opacity:.45}.btn-delete:hover{opacity:1;color:var(--error);background:var(--error-container)}.btn-delete:active{transform:none}.item-edit{padding:.75rem .875rem;border-top:1px solid var(--outline-variant);background:var(--surface-2);display:flex;flex-direction:column;gap:.75rem}.section-manage{margin:1.25rem 1rem 0;display:flex;flex-direction:column;gap:.5rem}.section-manage details{background:var(--surface-1);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);overflow:hidden}.section-manage details summary{padding:.875rem 1rem;cursor:pointer;font-size:.875rem;font-weight:500;color:var(--on-surface-variant);-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:.5rem}.section-manage details summary::marker{display:none}.section-manage details summary::-webkit-details-marker{display:none}.section-manage details summary:before{content:"›";font-size:1.1rem;transition:transform .2s}.section-manage details[open] summary:before{transform:rotate(90deg)}.inline-form{display:flex;gap:.5rem;padding:0 1rem .875rem}.inline-form input{flex:1;font-size:.9rem}.inline-form button{flex-shrink:0;padding:.5rem 1rem;border-radius:var(--radius-md)}.tag-manage{padding:0 1rem .875rem;display:flex;flex-direction:column;gap:.625rem}.tag-list{display:flex;flex-wrap:wrap;gap:.375rem;min-height:1.75rem}.tag-item{display:inline-flex;align-items:center;gap:.3rem;background:var(--primary-container);color:var(--on-primary-container);padding:.25rem .625rem;border-radius:var(--radius-pill);font-size:.8rem;font-weight:500}.tag-item button{background:none;color:var(--on-primary-container);padding:0;font-size:.75rem;opacity:.7}.tag-item button:hover{opacity:1}.tag-item button:active{transform:none}.empty-hint{font-size:.8rem;color:var(--on-surface-variant)}.share-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;z-index:100}.share-modal .share-card{background:var(--surface-1);border-radius:var(--radius-xl);padding:1.5rem;width:min(480px,100%);box-shadow:var(--shadow-3);display:flex;flex-direction:column;gap:1rem}.share-modal .share-card h2{font-size:1rem;font-weight:600}.share-modal .share-card p{font-size:.875rem;color:var(--on-surface-variant)}.share-modal .share-card input{font-size:.875rem;background:var(--surface);border-color:var(--outline-variant)}.share-modal .share-card .btn-close{background:var(--surface);color:var(--on-surface);border:1.5px solid var(--outline);width:100%}.share-view .items li{cursor:pointer}.btn-text{background:transparent;color:var(--primary);padding:.375rem .75rem}.btn-text:hover{background:var(--primary-container)}