.backdrop{pointer-events:none;z-index:0;background:radial-gradient(circle,#ff6b6b1f 0%,#0000 70%);border-radius:50%;width:400px;height:400px;position:fixed;top:-120px;right:-80px}.backdrop:after{content:"";pointer-events:none;background:radial-gradient(circle,#00c9b71a 0%,#0000 70%);border-radius:50%;width:350px;height:350px;position:fixed;bottom:-100px;left:-60px}.container{z-index:1;max-width:560px;margin:0 auto;padding:40px 20px 60px;position:relative}header{text-align:center;margin-bottom:36px}.logo-row{justify-content:center;align-items:center;gap:20px;margin-bottom:8px;display:flex}.deco-line{background:var(--gradient-miami);border-radius:2px;width:50px;height:3px}h1{font-family:var(--font-display);letter-spacing:6px;background:var(--gradient-miami);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:2.8rem;line-height:1}.tagline{color:var(--text-secondary);letter-spacing:3px;text-transform:uppercase;font-size:.85rem;font-weight:500}.controls{flex-direction:column;gap:12px;margin-bottom:28px;display:flex}.search-wrapper{position:relative}.search-icon{color:var(--text-secondary);pointer-events:none;position:absolute;top:50%;left:16px;transform:translateY(-50%)}.search-input{border:2px solid var(--border);border-radius:var(--radius);width:100%;font-family:var(--font-body);background:var(--card);color:var(--text);outline:none;padding:14px 16px 14px 46px;font-size:1rem;transition:border-color .2s,box-shadow .2s}.search-input:focus{border-color:var(--turquoise);box-shadow:0 0 0 4px #00c9b71f}.search-input::placeholder{color:var(--text-secondary)}.add-form{gap:8px;display:flex}.add-form input[type=text]{border:2px solid var(--border);border-radius:var(--radius);font-family:var(--font-body);background:var(--card);color:var(--text);outline:none;flex:1;padding:14px 16px;font-size:1rem;transition:border-color .2s,box-shadow .2s}.add-form input[type=text]:focus{border-color:var(--coral);box-shadow:0 0 0 4px #ff6b6b1f}.add-form input[type=number]{border:2px solid var(--border);border-radius:var(--radius);width:72px;font-family:var(--font-body);text-align:center;background:var(--card);color:var(--text);-moz-appearance:textfield;outline:none;padding:14px 12px;font-size:1rem;transition:border-color .2s,box-shadow .2s}.add-form input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}.add-form input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.add-form input[type=number]:focus{border-color:var(--coral);box-shadow:0 0 0 4px #ff6b6b1f}.add-form input::placeholder{color:var(--text-secondary)}.add-btn{border-radius:var(--radius);background:var(--coral);color:#fff;font-family:var(--font-body);cursor:pointer;white-space:nowrap;border:none;align-items:center;gap:6px;padding:14px 22px;font-size:1rem;font-weight:600;transition:background .2s,transform .1s,box-shadow .2s;display:flex}.add-btn:hover{background:var(--coral-dark);box-shadow:0 4px 12px #ff6b6b4d}.add-btn:active{transform:scale(.97)}.items-list{flex-direction:column;gap:8px;display:flex}.item{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);justify-content:space-between;align-items:center;padding:16px 20px;transition:box-shadow .2s,transform .2s,border-color .2s;animation:.3s ease-out both slideIn;display:flex}.item:hover{box-shadow:var(--shadow-md);border-color:var(--coral-light);transform:translateY(-1px)}@keyframes slideIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.item-name{color:var(--navy);text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;padding-right:16px;font-size:1rem;font-weight:600;overflow:hidden}.item-actions{flex-shrink:0;align-items:center;gap:4px;display:flex}.btn-count{border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-accent);width:40px;height:40px;color:var(--navy);cursor:pointer;font-size:1.2rem;font-weight:700;font-family:var(--font-body);-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;line-height:1;transition:all .15s;display:flex}.btn-count.minus{color:var(--coral);border-color:var(--coral-light)}.btn-count.minus:hover{background:var(--coral);color:#fff;border-color:var(--coral);box-shadow:0 2px 8px #ff6b6b40}.btn-count.plus{color:var(--turquoise-dark);border-color:var(--turquoise-light)}.btn-count.plus:hover{background:var(--turquoise);color:#fff;border-color:var(--turquoise);box-shadow:0 2px 8px #00c9b740}.btn-count:active{transform:scale(.9)}.item-count{text-align:center;min-width:44px;color:var(--navy);font-variant-numeric:tabular-nums;font-size:1.15rem;font-weight:700}.item-count.bump{animation:.2s ease-out bump}@keyframes bump{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.count-zero{color:var(--text-secondary);opacity:.5}.btn-delete{border-radius:var(--radius-sm);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;opacity:0;-webkit-tap-highlight-color:transparent;background:0 0;border:none;justify-content:center;align-items:center;margin-left:4px;transition:all .15s;display:flex}.item:hover .btn-delete{opacity:1}.btn-delete:hover{color:var(--coral-dark);background:#fee}.item.removing{animation:.25s ease-in forwards slideOut}@keyframes slideOut{to{opacity:0;border:0;height:0;margin:0;padding:0 20px;overflow:hidden;transform:translate(30px)}}.empty-state{text-align:center;color:var(--text-secondary);padding:60px 20px}.empty-state svg{color:var(--coral-light);margin-bottom:16px}.empty-state p{font-family:var(--font-display);color:var(--navy);margin-bottom:6px;font-size:1.3rem}.empty-state span{font-size:.9rem}.toast{border-radius:var(--radius);font-family:var(--font-body);color:#fff;pointer-events:none;opacity:0;z-index:100;white-space:nowrap;padding:12px 24px;font-size:.9rem;font-weight:600;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s;position:fixed;bottom:24px;left:50%;transform:translate(-50%)translateY(100px)}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}.toast.error{background:var(--coral);box-shadow:0 4px 16px #ff6b6b4d}.toast.success{background:var(--turquoise-dark);box-shadow:0 4px 16px #00c9b74d}@media (width<=500px){.container{padding:28px 14px 40px}h1{letter-spacing:4px;font-size:2rem}.deco-line{width:30px}.add-form{flex-wrap:wrap}.add-form input[type=text]{flex:100%}.add-form input[type=number]{flex:1}.add-btn{flex:1;justify-content:center}.item{padding:14px}.btn-delete{opacity:1}.btn-count{width:44px;height:44px;font-size:1.3rem}.item-count{min-width:40px}}:root{--bg:#fef3ed;--bg-accent:#fff8f4;--card:#fff;--coral:#ff6b6b;--coral-dark:#e84d4d;--coral-light:#ffe0d6;--turquoise:#00c9b7;--turquoise-dark:#00a89a;--turquoise-light:#d4faf5;--gold:#ffb84d;--gold-light:#fff0d4;--navy:#1a2332;--navy-light:#2d3e50;--text:#1a2332;--text-secondary:#7a8899;--border:#f0e4dc;--shadow:0 2px 8px #1a23320f;--shadow-md:0 4px 16px #1a233214;--radius:14px;--radius-sm:10px;--font-display:"Abril Fatface", serif;--font-body:"DM Sans", sans-serif;--gradient-miami:linear-gradient(135deg, var(--coral) 0%, var(--gold) 50%, var(--turquoise) 100%)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100dvh;overflow-x:hidden}