:root{--bg-primary: #f5f0e8;--bg-secondary: #ece6d9;--bg-card: #fffdf7;--bg-card-hover: #fff9ee;--bg-elevated: #e8e1d3;--bg-glass: rgba(255, 253, 247, .85);--bg-receipt: #faf7f0;--ink-primary: #2c2416;--ink-secondary: #6b5e4f;--ink-muted: #9e9283;--ink-faint: #c4b9a8;--accent-tomato: #d44527;--accent-tomato-soft: rgba(212, 69, 39, .12);--accent-tomato-glow: rgba(212, 69, 39, .25);--accent-sage: #5a7a5a;--accent-sage-soft: rgba(90, 122, 90, .12);--accent-mustard: #c4952a;--accent-mustard-soft: rgba(196, 149, 42, .15);--accent-espresso: #3d2b1f;--accent-cream: #e8d5b5;--border-pencil: rgba(44, 36, 22, .12);--border-stamp: rgba(212, 69, 39, .3);--font-hand: "Caveat", cursive;--font-display: "Gabarito", sans-serif;--font-mono: "DM Mono", monospace;--fs-hero: clamp(2.5rem, 8vw, 4.5rem);--fs-h1: clamp(1.75rem, 5vw, 2.75rem);--fs-h2: clamp(1.3rem, 3.5vw, 1.75rem);--fs-h3: 1.25rem;--fs-body: .9375rem;--fs-small: .8125rem;--fs-tiny: .6875rem;--fs-receipt: .875rem;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4.5rem;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 20px;--radius-full: 999px;--shadow-paper: 0 1px 3px rgba(44, 36, 22, .08), 0 4px 12px rgba(44, 36, 22, .06);--shadow-card: 0 2px 8px rgba(44, 36, 22, .07), 0 8px 24px rgba(44, 36, 22, .05);--shadow-lifted: 0 8px 30px rgba(44, 36, 22, .12), 0 2px 8px rgba(44, 36, 22, .08);--shadow-stamp: 2px 2px 0 rgba(212, 69, 39, .15);--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--ease-snap: cubic-bezier(.5, 1.5, .5, 1);--duration-fast: .15s;--duration-normal: .3s;--duration-slow: .5s}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-display);background:var(--bg-primary);color:var(--ink-primary);min-height:100dvh;overflow-x:hidden;line-height:1.55;position:relative}body:before{content:"";position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:0;opacity:.7}body:after{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 15% 85%,rgba(212,69,39,.06) 0%,transparent 50%),radial-gradient(ellipse at 85% 15%,rgba(90,122,90,.05) 0%,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(196,149,42,.04) 0%,transparent 60%);pointer-events:none;z-index:0}#app{position:relative;z-index:1;min-height:100dvh;display:flex;flex-direction:column}h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.15;color:var(--ink-primary)}button{font-family:var(--font-display);cursor:pointer;border:none;background:none;color:inherit}input,textarea{font-family:var(--font-mono);color:var(--ink-primary);background:transparent;border:none;outline:none}img{max-width:100%;display:block}a{color:var(--accent-tomato);text-decoration:none}.app-container{max-width:440px;margin:var(--space-xl) auto;padding:var(--space-xl) var(--space-lg);width:100%;flex:1;display:flex;flex-direction:column;background:var(--bg-receipt);border:1px solid var(--border-pencil);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);position:relative;min-height:calc(100dvh - var(--space-3xl))}.app-container:after{content:"";position:absolute;bottom:-1px;left:-1px;right:-1px;height:6px;background:repeating-linear-gradient(90deg,transparent,transparent 6px,var(--bg-primary) 6px,var(--bg-primary) 12px);border-radius:0 0 var(--radius-lg) var(--radius-lg)}@media(max-width:480px){.app-container{margin:0;border-radius:0;border:none;box-shadow:none;min-height:100dvh}.app-container:after{display:none}}.step-header{text-align:center;margin-bottom:var(--space-xl);position:relative}.step-indicator{display:flex;justify-content:center;align-items:center;gap:6px;margin-bottom:var(--space-lg)}.step-dot{width:18px;height:4px;border-radius:2px;background:var(--ink-faint);transition:all var(--duration-normal) var(--ease-out)}.step-dot.active{width:36px;background:var(--accent-tomato);border-radius:2px;box-shadow:var(--shadow-stamp)}.step-dot.done{background:var(--accent-sage)}.step-title{font-family:var(--font-hand);font-size:var(--fs-h1);font-weight:700;margin-bottom:var(--space-sm);color:var(--accent-espresso);position:relative;display:inline-block}.step-title:after{content:"";position:absolute;bottom:-2px;left:5%;right:5%;height:3px;background:var(--accent-tomato);opacity:.3;border-radius:2px;transform:rotate(-.5deg)}.step-subtitle{font-family:var(--font-mono);font-size:var(--fs-small);color:var(--ink-muted);letter-spacing:.02em}.step-view{animation:stepSlideUp var(--duration-slow) var(--ease-out);flex:1;display:flex;flex-direction:column}@keyframes stepSlideUp{0%{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.receipt-divider{border:none;border-top:2px dashed var(--border-pencil);margin:var(--space-lg) 0}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--ink-faint);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--ink-muted)}::selection{background:var(--accent-tomato-soft);color:var(--accent-espresso)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:12px 24px;border-radius:var(--radius-md);font-family:var(--font-display);font-size:var(--fs-body);font-weight:700;transition:all var(--duration-normal) var(--ease-out);position:relative;letter-spacing:.01em}.btn:active{transform:scale(.97)}.btn-primary{background:var(--accent-tomato);color:#fffdf7;box-shadow:0 2px 8px #d4452740,inset 0 1px #ffffff26}.btn-primary:hover{background:#c03d20;box-shadow:0 4px 16px #d4452759,inset 0 1px #ffffff26;transform:translateY(-1px)}.btn-secondary{background:var(--bg-card);color:var(--ink-primary);border:1.5px solid var(--border-pencil);box-shadow:var(--shadow-paper)}.btn-secondary:hover{border-color:var(--ink-muted);box-shadow:var(--shadow-card);transform:translateY(-1px)}.btn-teal{background:var(--accent-sage);color:#fffdf7;box-shadow:0 2px 8px #5a7a5a40,inset 0 1px #ffffff1f}.btn-teal:hover{background:#4d6b4d;transform:translateY(-1px)}.btn-small{padding:8px 16px;font-size:var(--fs-small)}.btn-icon{width:40px;height:40px;padding:0;border-radius:var(--radius-full);font-size:1.2rem}.btn-full{width:100%}.btn:disabled{opacity:.35;pointer-events:none}.upload-zone{border:2px dashed var(--ink-faint);border-radius:var(--radius-xl);padding:var(--space-3xl) var(--space-xl);text-align:center;cursor:pointer;transition:all var(--duration-normal) var(--ease-out);position:relative;overflow:hidden;background:var(--bg-card);box-shadow:var(--shadow-paper)}.upload-zone:hover,.upload-zone.drag-over{border-color:var(--accent-tomato);border-style:solid;box-shadow:var(--shadow-card),0 0 0 4px var(--accent-tomato-soft);transform:translateY(-2px)}.upload-zone-icon{font-size:4rem;margin-bottom:var(--space-md);display:block;position:relative;animation:gentleBob 4s ease-in-out infinite}@keyframes gentleBob{0%,to{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}.upload-zone-text{font-family:var(--font-hand);font-size:1.5rem;font-weight:600;color:var(--ink-primary);margin-bottom:var(--space-xs);position:relative}.upload-zone-hint{font-family:var(--font-mono);font-size:var(--fs-tiny);color:var(--ink-muted);position:relative;letter-spacing:.03em}.upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}.image-preview{position:relative;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--space-lg);box-shadow:var(--shadow-card);border:2px solid var(--border-pencil)}.image-preview img{width:100%;max-height:300px;object-fit:cover;border-radius:var(--radius-lg)}.image-preview-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(44,36,22,.7) 0%,transparent 50%);display:flex;align-items:flex-end;padding:var(--space-md)}.progress-container{margin:var(--space-xl) 0;text-align:center}.progress-bar{width:100%;height:8px;border-radius:var(--radius-full);background:var(--bg-elevated);overflow:hidden;margin-bottom:var(--space-md);border:1px solid var(--border-pencil)}.progress-fill{height:100%;border-radius:var(--radius-full);background:var(--accent-tomato);transition:width var(--duration-normal) var(--ease-out)}.progress-text{font-family:var(--font-mono);font-size:var(--fs-small);color:var(--ink-muted)}.dish-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:var(--space-md);padding:var(--space-sm) 0}.dish-card{perspective:800px;cursor:grab;user-select:none;-webkit-user-select:none}.dish-card:active{cursor:grabbing}.dish-card-inner{background:var(--bg-card);border:1.5px solid var(--border-pencil);border-radius:var(--radius-md);padding:var(--space-md) var(--space-sm);transform:rotate(-1deg);box-shadow:var(--shadow-card);transition:all var(--duration-normal) var(--ease-bounce);position:relative;overflow:hidden}.dish-card-inner:before{content:"";position:absolute;top:-1px;left:0;right:0;height:4px;background:repeating-linear-gradient(90deg,transparent,transparent 4px,var(--bg-primary) 4px,var(--bg-primary) 8px)}.dish-card-inner:after{content:"";position:absolute;bottom:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--accent-tomato);opacity:.3}.dish-card:nth-child(2n) .dish-card-inner{transform:rotate(.5deg)}.dish-card:nth-child(3n) .dish-card-inner{transform:rotate(-.3deg)}.dish-card:hover .dish-card-inner{transform:rotate(0) translateY(-6px) scale(1.03);box-shadow:var(--shadow-lifted);border-color:var(--accent-tomato)}.dish-card.dragging .dish-card-inner{opacity:.4;transform:rotate(0) scale(.95);box-shadow:var(--shadow-paper)}.dish-card.assigned{opacity:.3;pointer-events:none}.dish-card.assigned .dish-card-inner{transform:scale(.92);filter:grayscale(.5)}.dish-emoji{font-size:2.5rem;text-align:center;margin-bottom:var(--space-sm);filter:drop-shadow(0 2px 3px rgba(44,36,22,.15))}.dish-name{font-family:var(--font-hand);font-size:1rem;font-weight:600;color:var(--ink-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;margin-bottom:4px}.dish-meta{display:flex;justify-content:space-between;align-items:center;gap:var(--space-xs);border-top:1px dashed var(--border-pencil);padding-top:4px;margin-top:2px}.dish-qty{font-family:var(--font-mono);font-size:var(--fs-tiny);color:var(--ink-muted)}.dish-price{font-family:var(--font-mono);font-size:var(--fs-small);font-weight:500;color:var(--accent-tomato)}.items-list{display:flex;flex-direction:column;gap:0;margin-bottom:var(--space-lg);flex:1;overflow-y:auto;padding-right:var(--space-xs);background:var(--bg-card);border-radius:var(--radius-lg);border:1.5px solid var(--border-pencil);box-shadow:var(--shadow-paper)}.item-row{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);transition:all var(--duration-fast);animation:itemSlideIn var(--duration-normal) var(--ease-out);border-bottom:1px dashed var(--border-pencil)}.item-row:last-child{border-bottom:none}@keyframes itemSlideIn{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.item-row:hover{background:var(--accent-mustard-soft)}.item-emoji{font-size:1.4rem;flex-shrink:0}.item-name-input{flex:1;font-family:var(--font-hand);font-size:1.1rem;font-weight:600;min-width:0;color:var(--ink-primary)}.item-qty-input{width:36px;text-align:center;font-family:var(--font-mono);font-size:var(--fs-small);color:var(--ink-secondary);background:var(--bg-elevated);border-radius:var(--radius-sm);padding:4px;border:1px solid var(--border-pencil)}.item-qty-input:focus{border-color:var(--accent-sage);box-shadow:0 0 0 2px var(--accent-sage-soft)}.item-price-input{width:72px;text-align:right;font-family:var(--font-mono);font-size:var(--fs-body);font-weight:500;color:var(--accent-tomato)}.item-remove{width:26px;height:26px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:.75rem;color:var(--ink-faint);transition:all var(--duration-fast);flex-shrink:0}.item-remove:hover{background:var(--accent-tomato-soft);color:var(--accent-tomato)}.add-item-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md);border:2px dashed var(--ink-faint);border-radius:var(--radius-md);color:var(--ink-muted);font-family:var(--font-mono);font-size:var(--fs-small);font-weight:400;transition:all var(--duration-fast);width:100%;margin-bottom:var(--space-md);letter-spacing:.02em}.add-item-btn:hover{border-color:var(--accent-sage);color:var(--accent-sage);background:var(--accent-sage-soft)}.friends-input-row{display:flex;gap:var(--space-sm);margin-bottom:var(--space-xl)}.friend-input{flex:1;background:var(--bg-card);border:1.5px solid var(--border-pencil);border-radius:var(--radius-md);padding:var(--space-md) var(--space-lg);font-family:var(--font-mono);font-size:var(--fs-body);transition:all var(--duration-fast);box-shadow:var(--shadow-paper)}.friend-input:focus{border-color:var(--accent-sage);box-shadow:var(--shadow-paper),0 0 0 3px var(--accent-sage-soft)}.friend-input::placeholder{color:var(--ink-faint)}.friends-grid{display:flex;flex-wrap:wrap;gap:var(--space-md);margin-bottom:var(--space-xl)}.friend-chip{display:flex;align-items:center;gap:var(--space-sm);background:var(--bg-card);border:1.5px solid var(--border-pencil);border-radius:var(--radius-lg);padding:6px 14px 6px 6px;box-shadow:var(--shadow-paper);animation:stampIn var(--duration-normal) var(--ease-snap);transition:all var(--duration-fast)}.friend-chip:hover{box-shadow:var(--shadow-card);transform:translateY(-2px)}@keyframes stampIn{0%{transform:scale(.5) rotate(-10deg);opacity:0}60%{transform:scale(1.1) rotate(2deg)}to{transform:scale(1) rotate(0);opacity:1}}.friend-avatar{width:36px;height:36px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--fs-small);color:#fffdf7;flex-shrink:0;font-family:var(--font-display);box-shadow:inset 0 -2px #00000026;transform:rotate(-1deg)}.friend-name{font-family:var(--font-hand);font-size:1.1rem;font-weight:600;color:var(--ink-primary)}.friend-remove{width:22px;height:22px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:.65rem;color:var(--ink-faint);transition:all var(--duration-fast);margin-left:var(--space-xs)}.friend-remove:hover{background:var(--accent-tomato-soft);color:var(--accent-tomato)}.assign-layout{flex:1;display:flex;flex-direction:column;gap:var(--space-lg);overflow:hidden}.assign-dishes-section{flex:1;overflow-y:auto;min-height:0}.assign-dishes-section h3{font-family:var(--font-hand);font-size:1.3rem;color:var(--ink-secondary);margin-bottom:var(--space-md);display:flex;align-items:center;gap:var(--space-sm)}.unassigned-count{background:var(--accent-tomato);color:#fffdf7;font-family:var(--font-mono);font-size:var(--fs-tiny);padding:2px 10px;border-radius:var(--radius-full);font-weight:500;letter-spacing:.03em}.assign-friends-section{flex-shrink:0}.assign-friends-section h3{font-family:var(--font-hand);font-size:1.3rem;color:var(--ink-secondary);margin-bottom:var(--space-md)}.drop-zones{display:flex;flex-direction:column;gap:var(--space-sm)}.drop-zone{display:flex;align-items:center;gap:var(--space-md);background:var(--bg-card);border:2px solid var(--border-pencil);border-radius:var(--radius-lg);padding:var(--space-md);transition:all var(--duration-normal) var(--ease-out);min-height:64px;box-shadow:var(--shadow-paper)}.drop-zone.drag-over{border-color:var(--accent-sage);border-style:dashed;background:var(--accent-sage-soft);box-shadow:var(--shadow-card),0 0 0 4px var(--accent-sage-soft);transform:scale(1.01)}.drop-zone-avatar{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--fs-body);color:#fffdf7;flex-shrink:0;font-family:var(--font-display);box-shadow:inset 0 -2px #00000026}.drop-zone-info{flex:1;min-width:0}.drop-zone-name{font-family:var(--font-hand);font-weight:700;font-size:1.15rem;color:var(--ink-primary)}.drop-zone-items{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.drop-zone-item-tag{font-family:var(--font-mono);font-size:var(--fs-tiny);background:var(--bg-elevated);border-radius:var(--radius-sm);padding:2px 8px;color:var(--ink-secondary);display:flex;align-items:center;gap:4px;cursor:pointer;transition:all var(--duration-fast);border:1px solid transparent}.drop-zone-item-tag:hover{background:var(--accent-tomato-soft);color:var(--accent-tomato);border-color:var(--accent-tomato)}.drop-zone-item-tag .tag-remove{font-size:.55rem;opacity:.4}.drop-zone-item-tag:hover .tag-remove{opacity:1}.drop-zone-total{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-h3);color:var(--accent-tomato);flex-shrink:0;white-space:nowrap}.drop-zone-empty{font-family:var(--font-mono);color:var(--ink-faint);font-size:var(--fs-small);font-style:italic;letter-spacing:.02em}.summary-cards{display:flex;flex-direction:column;gap:var(--space-md);margin-bottom:var(--space-xl);flex:1;overflow-y:auto}.summary-card{background:var(--bg-card);border:1.5px solid var(--border-pencil);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-card);animation:receiptUnfold var(--duration-slow) var(--ease-out) both;position:relative}.summary-card:before{content:"";position:absolute;top:-1px;left:0;right:0;height:5px;background:repeating-linear-gradient(90deg,transparent,transparent 5px,var(--bg-primary) 5px,var(--bg-primary) 10px);border-radius:var(--radius-lg) var(--radius-lg) 0 0}.summary-card:nth-child(1){animation-delay:0ms}.summary-card:nth-child(2){animation-delay:.12s}.summary-card:nth-child(3){animation-delay:.24s}.summary-card:nth-child(4){animation-delay:.36s}.summary-card:nth-child(5){animation-delay:.48s}@keyframes receiptUnfold{0%{opacity:0;transform:translateY(16px) rotateX(8deg);transform-origin:top center}to{opacity:1;transform:translateY(0) rotateX(0)}}.summary-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:2px dashed var(--border-pencil)}.summary-card-person{display:flex;align-items:center;gap:var(--space-sm)}.summary-card-avatar{width:40px;height:40px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--fs-small);color:#fffdf7;font-family:var(--font-display);box-shadow:inset 0 -2px #00000026}.summary-card-name{font-family:var(--font-hand);font-weight:700;font-size:1.4rem;color:var(--ink-primary)}.summary-card-total{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-h2);color:var(--accent-tomato)}.summary-card-items{display:flex;flex-direction:column;gap:0}.summary-item-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-family:var(--font-mono);font-size:var(--fs-small);color:var(--ink-secondary);border-bottom:1px dotted var(--border-pencil)}.summary-item-row:last-child{border-bottom:none}.summary-item-name{display:flex;align-items:center;gap:var(--space-sm)}.summary-item-price{font-weight:500;color:var(--ink-primary)}.summary-grand-total{background:var(--bg-card);border:3px solid var(--accent-tomato);border-radius:var(--radius-lg);padding:var(--space-lg) var(--space-xl);display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-lg);box-shadow:var(--shadow-card);position:relative;overflow:hidden}.summary-grand-total:before{content:"PAID";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-15deg);font-family:var(--font-display);font-size:4.5rem;font-weight:900;color:var(--accent-tomato);opacity:.06;letter-spacing:.1em;pointer-events:none}.summary-grand-label{font-family:var(--font-hand);font-weight:700;font-size:1.3rem;color:var(--ink-primary)}.summary-grand-value{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-h1);color:var(--accent-tomato)}.bottom-actions{margin-top:auto;padding-top:var(--space-lg);display:flex;gap:var(--space-sm)}.bottom-actions .btn{flex:1}.confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:9999}.empty-state{text-align:center;padding:var(--space-3xl) var(--space-xl);color:var(--ink-muted)}.empty-state-icon{font-size:3rem;margin-bottom:var(--space-md);opacity:.5}.empty-state-text{font-family:var(--font-mono);font-size:var(--fs-small);letter-spacing:.02em}@media(max-width:400px){.dish-card-grid{grid-template-columns:repeat(2,1fr)}.app-container{padding:var(--space-md)}}