:root{--zoom:1;--bg-color:#fdfbf7;--surface-color:#fff8d6;--surface-color-hover:#ffefb3;--text-primary:#1e1e1e;--text-secondary:#5a5a5a;--accent-color:#04c;--accent-color-hover:#039;--success-color:#d11a2a;--border-radius:2px 15px 3px 15px / 15px 2px 15px 3px;--transition:all .3s cubic-bezier(.25, .8, .25, 1);--shadow-sm:2px 3px 6px #00000026;--base-line-height:36px;--line-height:calc(var(--base-line-height) * var(--zoom));--line-color:#a0d8ef99}body.dark-theme{--bg-color:#1a1f22;--surface-color:#2c3539;--surface-color-hover:#364146;--text-primary:#f8f9fa;--text-secondary:#a8b2b7;--accent-color:gold;--accent-color-hover:#ffea00;--success-color:#ff6b6b;--line-color:#ffffff0d}html{font-size:calc(100% * var(--zoom))}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);background-image:repeating-linear-gradient(transparent, transparent calc(var(--line-height) - 1px), var(--line-color) calc(var(--line-height) - 1px), var(--line-color) var(--line-height));color:var(--text-primary);font-family:Kalam,cursive;font-size:1.1rem;line-height:var(--line-height);-webkit-font-smoothing:antialiased;background-attachment:local;min-height:100vh}#app{max-width:600px;margin:0 auto;padding:16px 10px}header,main{padding-top:4px}header{border-bottom:2px solid var(--accent-color);border-radius:4px 60%/100% 4px;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:12px;display:flex}h1{color:var(--accent-color);text-shadow:1px 1px #0000001a;font-family:Caveat,cursive;font-size:2.2rem;font-weight:700;line-height:1.2}.btn-primary{background:var(--surface-color);color:var(--accent-color);border:2px solid var(--accent-color);cursor:pointer;transition:var(--transition);border-radius:20px 5px 25px 3px/5px 20px 3px 25px;outline:none;padding:4px 16px;font-family:Kalam,cursive;font-size:1rem;font-weight:700;box-shadow:2px 2px #04c3}.btn-primary:not(:disabled):hover{background:var(--surface-color-hover);transform:rotate(-2deg)scale(1.05)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;border-color:var(--text-secondary);color:var(--text-secondary);box-shadow:none}.loader{text-align:center;color:var(--accent-color);padding:40px;font-size:1.2rem;font-style:italic;animation:1.5s infinite alternate pulse}@keyframes pulse{0%{opacity:.6}to{opacity:1}}.category-group{background:var(--surface-color);border-radius:var(--border-radius);box-shadow:var(--shadow-sm);transition:var(--transition);border:1px solid #0000000d;margin-bottom:20px;padding:12px 16px;position:relative}.category-group:before{content:"";z-index:1;background:#ffffff80;border:1px solid #0000001a;width:40px;height:15px;position:absolute;top:-8px;left:50%;transform:translate(-50%)rotate(-3deg);box-shadow:1px 1px 2px #0000001a}.category-group:hover{transform:rotate(1deg)}.category-title{color:var(--text-primary);border-bottom:1px dashed #0003;align-items:center;gap:8px;margin-bottom:8px;padding-bottom:4px;font-family:Caveat,cursive;font-size:1.4rem;font-weight:700;display:flex}.product-item{cursor:pointer;transition:var(--transition);align-items:center;margin-bottom:4px;padding:4px 10px;display:flex;position:relative}.product-item:hover{background:#00000008;border-radius:5px;transform:translate(4px)}.product-item.checked{opacity:.8}.product-item.checked .product-name{color:var(--text-secondary)}.product-name{transition:var(--transition);flex:1;font-size:1.1rem;font-weight:400;position:relative}.scribble-svg{pointer-events:none;opacity:0;z-index:2;width:104%;height:100%;position:absolute;top:0;left:-2%}.scribble-svg path{fill:none;stroke:var(--success-color);stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100px}.product-item.checked .scribble-svg{opacity:1}.product-item.checked .scribble-svg path{animation:.4s cubic-bezier(.25,1,.5,1) forwards drawScribble}@keyframes drawScribble{0%{stroke-dashoffset:100px}to{stroke-dashoffset:0}}.product-checkbox,.category-checkbox{appearance:none;border:2px solid var(--accent-color);cursor:pointer;width:22px;height:22px;transition:var(--transition);background-color:#0000;border-radius:3px 5px 2px 4px/4px 2px 5px 3px;margin-right:12px;position:relative}.product-checkbox:checked,.category-checkbox:checked{border-color:var(--success-color)}.product-checkbox:checked:after,.category-checkbox:checked:after{content:"✔";color:var(--success-color);font-family:Kalam,cursive;font-size:24px;position:absolute;top:-8px;left:2px}.empty-state{text-align:center;color:var(--text-primary);border:2px dashed var(--accent-color);border-radius:var(--border-radius);background:0 0;padding:40px 20px;transform:rotate(-1deg)}.empty-state p{margin-top:8px;font-size:1.2rem}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)rotate(-2deg)}to{opacity:1;transform:translateY(0)rotate(0)}}.animate-in{animation:.4s cubic-bezier(.25,.8,.25,1) forwards slideIn}.product-info{flex:1;grid-template-columns:1fr 70px 80px 30px;align-items:center;gap:8px;display:grid}.col-qty{text-align:left}.col-price{text-align:right}.badge-qty{color:var(--accent-color);border-bottom:2px solid var(--accent-color);font-size:.95rem;font-weight:700}.badge-price{color:#060;border-bottom:2px dashed #060;font-size:.95rem;font-weight:700}.product-item.checked .badge-qty,.product-item.checked .badge-price{opacity:.5;filter:grayscale()}.fab{background:var(--accent-color);color:#fff;cursor:pointer;z-index:100;width:60px;height:60px;transition:var(--transition);border:none;border-radius:50% 45% 55% 40%/45% 55% 40% 50%;justify-content:center;align-items:center;font-family:Caveat,cursive;font-size:32px;display:flex;position:fixed;bottom:24px;right:24px;box-shadow:2px 4px 8px #0000004d}.fab:hover{background:var(--accent-color-hover);transform:scale(1.1)rotate(10deg)}.modal-overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:200;opacity:1;background:#00000080;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .3s;display:flex;position:fixed;top:0;left:0}.modal-overlay.hidden{opacity:0;pointer-events:none}.modal-content{background:var(--surface-color);background-image:repeating-linear-gradient(transparent, transparent calc(var(--line-height) - 1px), var(--line-color) calc(var(--line-height) - 1px), var(--line-color) var(--line-height));background-position:0 35px;border:1px solid #0000001a;border-radius:3px 20px 5px 15px/20px 4px 15px 5px;width:90%;max-width:400px;padding:24px;transition:transform .3s;transform:translateY(0)rotate(-1deg);box-shadow:4px 8px 15px #0003}.modal-overlay.hidden .modal-content{transform:translateY(20px)rotate(-5deg)}.modal-header{border-bottom:2px solid var(--accent-color);justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.modal-header h2{color:var(--accent-color);margin:0;font-family:Caveat,cursive;font-size:1.8rem}.btn-icon{cursor:pointer;background:0 0;border:none;font-size:1.2rem;transition:transform .2s}.btn-icon:hover{transform:scale(1.2)rotate(15deg)}.btn-icon.hidden{display:none}.form-group{margin-bottom:16px}.form-group label{color:var(--text-primary);margin-bottom:2px;font-family:Kalam,cursive;font-size:1rem;font-weight:700;display:block}.form-group input,.form-group select{border:none;border-bottom:2px dashed var(--accent-color);width:100%;color:var(--text-primary);background:0 0;outline:none;padding:4px 8px;font-family:Kalam,cursive;font-size:1.1rem}.form-group select option{background-color:var(--surface-color);color:var(--text-primary)}.form-group input:focus,.form-group select:focus{border-bottom:2px solid var(--accent-color)}.modal-actions{justify-content:flex-end;gap:12px;margin-top:24px;display:flex}.btn-secondary{color:var(--text-secondary);border:2px dashed var(--text-secondary);cursor:pointer;transition:var(--transition);background:0 0;border-radius:5px 15px 3px 20px/15px 3px 20px 5px;padding:4px 16px;font-family:Kalam,cursive;font-size:1rem;font-weight:700}.btn-secondary:hover{color:var(--text-primary);background:#0000000d;border-style:solid}.btn-edit{cursor:pointer;filter:grayscale()opacity(.6);background:0 0;border:none;padding:4px;font-size:1.2rem;transition:all .2s}.btn-edit:hover{filter:grayscale(0%)opacity();transform:scale(1.1)rotate(-10deg)}.side-menu{background:var(--surface-color);border-right:2px solid var(--accent-color);background-image:repeating-linear-gradient(transparent, transparent calc(var(--line-height) - 1px), var(--line-color) calc(var(--line-height) - 1px), var(--line-color) var(--line-height));background-position:0 35px;border-radius:0 15px 15px 0;width:80%;max-width:300px;height:100%;padding:24px;transition:transform .3s cubic-bezier(.25,.8,.25,1);transform:translate(-100%);box-shadow:4px 0 15px #0003}.modal-overlay:not(.hidden) .side-menu{transform:translate(0)}