@import "https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Inter:wght@300;400;500;600;700&display=swap";:root{--color-cauldron-dark:#1a0f2e;--color-potion-glow:#8b5cf6;--color-ingredient-match:#10b981;--color-ingredient-missing:#ef4444;--color-mystical-accent:#f59e0b;--color-background-primary:#0f0a1e;--color-background-secondary:#1a0f2e;--color-background-tertiary:#2d1b4e;--color-text-primary:#f3f4f6;--color-text-secondary:#d1d5db;--color-text-muted:#9ca3af;--color-border-subtle:#374151;--color-border-medium:#4b5563;--color-border-glow:#8b5cf64d;--color-potion-purple:#8b5cf6;--color-potion-green:#10b981;--color-potion-orange:#f59e0b;--color-potion-red:#ef4444;--color-potion-blue:#3b82f6;--glow-potion:0 0 20px #8b5cf680;--glow-mystical:0 0 30px #f59e0b66;--glow-ingredient-match:0 0 15px #10b9814d;--glow-ingredient-missing:0 0 15px #ef44444d;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;--transition-fast:.15s ease-in-out;--transition-normal:.25s ease-in-out;--transition-slow:.4s ease-in-out;--z-base:1;--z-dropdown:100;--z-modal:200;--z-tooltip:300}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{background:var(--color-background-primary);color:var(--color-text-primary);min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.6;overflow-x:hidden}body:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(at 20% 30%,#8b5cf626 0%,#0000 50%),radial-gradient(at 80% 70%,#f59e0b1a 0%,#0000 50%),radial-gradient(#10b98114 0%,#0000 60%),linear-gradient(#0f0a1e 0%,#1a0f2e 50%,#2d1b4e 100%);position:fixed;inset:0}h1,h2,h3,h4,h5,h6{color:var(--color-text-primary);margin-bottom:var(--spacing-md);letter-spacing:.02em;font-family:Cinzel,Georgia,serif;font-weight:700;line-height:1.2}h1{text-shadow:0 0 20px #8b5cf680;font-size:3rem}h2{text-shadow:0 0 15px #8b5cf666;font-size:2.25rem}h3{text-shadow:0 0 10px #8b5cf64d;font-size:1.875rem}h4{font-size:1.5rem}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-bottom:var(--spacing-md);color:var(--color-text-secondary)}.container{width:100%;max-width:1280px;padding:0 var(--spacing-lg);margin:0 auto}.container-narrow{max-width:960px}.container-wide{max-width:1536px}.card{border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--spacing-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all var(--transition-normal);background:#1a0f2e99}.card:hover{border-color:var(--color-border-glow);box-shadow:var(--glow-potion);transform:translateY(-2px)}.card-dark{border-color:var(--color-border-medium);background:#0f0a1ecc}.card-glow{box-shadow:var(--glow-potion);border-color:var(--color-potion-glow)}.btn{justify-content:center;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm)var(--spacing-lg);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);white-space:nowrap;border:none;font-family:Cinzel,serif;font-size:1rem;font-weight:600;text-decoration:none;display:inline-flex}.btn-primary{background:linear-gradient(135deg,var(--color-potion-glow)0%,#6d28d9 100%);color:#fff;box-shadow:0 4px 15px #8b5cf666}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 25px #8b5cf699}.btn-primary:active{transform:translateY(0)}.btn-secondary{color:var(--color-potion-glow);border:1px solid var(--color-potion-glow);background:#8b5cf61a}.btn-secondary:hover{box-shadow:var(--glow-potion);background:#8b5cf633}.btn-success{background:linear-gradient(135deg,var(--color-ingredient-match)0%,#059669 100%);color:#fff;box-shadow:0 4px 15px #10b98166}.btn-success:hover{transform:translateY(-2px);box-shadow:0 6px 25px #10b98199}.btn-danger{background:linear-gradient(135deg,var(--color-ingredient-missing)0%,#dc2626 100%);color:#fff;box-shadow:0 4px 15px #ef444466}.btn-danger:hover{transform:translateY(-2px);box-shadow:0 6px 25px #ef444499}.btn-mystical{background:linear-gradient(135deg,var(--color-mystical-accent)0%,#d97706 100%);color:#fff;box-shadow:0 4px 15px #f59e0b66}.btn-mystical:hover{box-shadow:var(--glow-mystical);transform:translateY(-2px)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.input{width:100%;padding:var(--spacing-sm)var(--spacing-md);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text-primary);transition:all var(--transition-normal);background:#1a0f2e99;font-family:inherit;font-size:1rem}.input:focus{border-color:var(--color-potion-glow);outline:none;box-shadow:0 0 0 3px #8b5cf633}.input::placeholder{color:var(--color-text-muted)}textarea.input{resize:vertical;min-height:100px}.badge{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs)var(--spacing-sm);border-radius:var(--radius-full);white-space:nowrap;font-size:.875rem;font-weight:600;display:inline-flex}.badge-match{color:var(--color-ingredient-match);border:1px solid var(--color-ingredient-match);background:#10b98133}.badge-missing{color:var(--color-ingredient-missing);border:1px solid var(--color-ingredient-missing);background:#ef444433}.badge-potion{color:var(--color-potion-glow);border:1px solid var(--color-potion-glow);background:#8b5cf633}.badge-mystical{color:var(--color-mystical-accent);border:1px solid var(--color-mystical-accent);background:#f59e0b33}.text-center{text-align:center}.text-glow{text-shadow:0 0 10px}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.mt-xl{margin-top:var(--spacing-xl)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}.mb-xl{margin-bottom:var(--spacing-xl)}.p-sm{padding:var(--spacing-sm)}.p-md{padding:var(--spacing-md)}.p-lg{padding:var(--spacing-lg)}.p-xl{padding:var(--spacing-xl)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.grid{display:grid}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-3{grid-template-columns:repeat(3,1fr)}.grid-cols-4{grid-template-columns:repeat(4,1fr)}@media (max-width:768px){h1{font-size:2rem}h2{font-size:1.75rem}h3{font-size:1.5rem}.container{padding:0 var(--spacing-md)}.grid-cols-2,.grid-cols-3,.grid-cols-4{grid-template-columns:1fr}}@media (min-width:769px) and (max-width:1024px){.grid-cols-3,.grid-cols-4{grid-template-columns:repeat(2,1fr)}}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:focus-visible{outline:2px solid var(--color-potion-glow);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@keyframes bubble{0%,to{opacity:0;transform:translateY(0)scale(1)}50%{opacity:.8;transform:translateY(-30px)scale(1.2)}}.cauldron-bubble{animation:2s ease-in-out infinite bubble}.cauldron-bubble:nth-child(2){animation-delay:.3s}.cauldron-bubble:nth-child(3){animation-delay:.6s}.cauldron-bubble:nth-child(4){animation-delay:.9s}@keyframes steam-rise{0%{opacity:.8;transform:translateY(0)translate(0)scale(1)}50%{opacity:.5;transform:translateY(-40px)translate(10px)scale(1.3)}to{opacity:0;transform:translateY(-80px)translate(-10px)scale(1.5)}}.steam{animation:3s ease-out infinite steam-rise}.steam:nth-child(2){animation-duration:3.5s;animation-delay:.5s}.steam:nth-child(3){animation-duration:4s;animation-delay:1s}@keyframes cauldron-glow{0%,to{box-shadow:0 0 20px #8b5cf666,0 0 40px #8b5cf633,inset 0 0 20px #8b5cf61a}50%{box-shadow:0 0 30px #8b5cf699,0 0 60px #8b5cf64d,inset 0 0 30px #8b5cf633}}.cauldron-glow{animation:2s ease-in-out infinite cauldron-glow}@keyframes brew{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.brewing{animation:2s linear infinite brew}@keyframes swirl{0%{transform:rotate(0)scale(1)}50%{transform:rotate(180deg)scale(1.1)}to{transform:rotate(360deg)scale(1)}}.liquid-swirl{animation:4s ease-in-out infinite swirl}@keyframes potion-reveal{0%{opacity:0;transform:scale(.8)translateY(20px)}60%{transform:scale(1.05)translateY(-5px)}to{opacity:1;transform:scale(1)translateY(0)}}.potion-reveal{animation:.6s cubic-bezier(.34,1.56,.64,1) forwards potion-reveal}.potion-reveal:first-child{animation-delay:.1s}.potion-reveal:nth-child(2){animation-delay:.2s}.potion-reveal:nth-child(3){animation-delay:.3s}.potion-reveal:nth-child(4){animation-delay:.4s}.potion-reveal:nth-child(5){animation-delay:.5s}@keyframes potion-glow{0%,to{filter:drop-shadow(0 0 10px #8b5cf680)}50%{filter:drop-shadow(0 0 20px #8b5cf6cc)}}.potion-glow{animation:2s ease-in-out infinite potion-glow}@keyframes potion-hover{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.potion-hover:hover{animation:1s ease-in-out infinite potion-hover}@keyframes bar-fill{0%{opacity:0;width:0}to{width:var(--fill-width);opacity:1}}.waste-score-bar{animation:1s cubic-bezier(.4,0,.2,1) forwards bar-fill}@keyframes bar-shimmer{0%{background-position:-200%}to{background-position:200%}}.waste-score-bar-shimmer{background:linear-gradient(90deg,#0000,#ffffff4d,#0000) 0 0/200% 100%;animation:2s ease-in-out infinite bar-shimmer}@keyframes score-pulse{0%,to{box-shadow:0 0 10px}50%{box-shadow:0 0 20px}}.score-pulse{animation:1.5s ease-in-out infinite score-pulse}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.shimmer{background:linear-gradient(90deg,#0000 0%,#8b5cf64d 50%,#0000 100%) 0 0/1000px 100%;animation:3s linear infinite shimmer}@keyframes sparkle{0%,to{opacity:0;transform:scale(0)rotate(0)}50%{opacity:1;transform:scale(1)rotate(180deg)}}.sparkle{animation:1.5s ease-in-out infinite sparkle}.sparkle:nth-child(2){animation-delay:.3s}.sparkle:nth-child(3){animation-delay:.6s}@keyframes mystical-glow{0%,to{box-shadow:0 0 10px #f59e0b4d,0 0 20px #f59e0b33}50%{box-shadow:0 0 20px #f59e0b80,0 0 40px #f59e0b4d}}.mystical-glow{animation:2s ease-in-out infinite mystical-glow}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.float{animation:3s ease-in-out infinite float}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinner{animation:1s linear infinite spin}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.95)}}.pulse{animation:2s ease-in-out infinite pulse}@keyframes dot-pulse{0%,80%,to{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}.dot-pulse{animation:1.4s ease-in-out infinite dot-pulse}.dot-pulse:first-child{animation-delay:0s}.dot-pulse:nth-child(2){animation-delay:.2s}.dot-pulse:nth-child(3){animation-delay:.4s}@keyframes modal-fade-in{0%{opacity:0}to{opacity:1}}.modal-fade-in{animation:.3s ease-out forwards modal-fade-in}@keyframes modal-slide-up{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.modal-slide-up{animation:.4s cubic-bezier(.34,1.56,.64,1) forwards modal-slide-up}@keyframes overlay-fade-in{0%{opacity:0}to{opacity:1}}.overlay-fade-in{animation:.3s ease-out forwards overlay-fade-in}@keyframes chip-appear{0%{opacity:0;transform:scale(.8)translateY(-10px)}to{opacity:1;transform:scale(1)translateY(0)}}.chip-appear{animation:.4s cubic-bezier(.34,1.56,.64,1) forwards chip-appear}@keyframes chip-remove{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5)translateY(-10px)}}.chip-remove{animation:.3s ease-out forwards chip-remove}@keyframes button-press{0%{transform:scale(1)}50%{transform:scale(.95)}to{transform:scale(1)}}.button-press:active{animation:.2s ease-out button-press}@keyframes ripple{0%{opacity:1;transform:scale(0)}to{opacity:0;transform:scale(4)}}.ripple{animation:.6s ease-out ripple}@keyframes toast-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.toast-slide-in{animation:.3s ease-out forwards toast-slide-in}@keyframes toast-slide-out{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}.toast-slide-out{animation:.3s ease-in forwards toast-slide-out}@keyframes skeleton-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton{background:linear-gradient(90deg,#1a0f2e99 0%,#8b5cf633 50%,#1a0f2e99 100%) 0 0/200% 100%;animation:1.5s ease-in-out infinite skeleton-shimmer}@keyframes particle-float{0%{opacity:0;transform:translateY(0)translate(0)scale(0)}50%{opacity:1}to{opacity:0;transform:translateY(-100px)translateX(var(--particle-x,20px))scale(1)}}.particle{animation:3s ease-out infinite particle-float}@keyframes glitch{0%,to{transform:translate(0)}20%{transform:translate(-2px,2px)}40%{transform:translate(-2px,-2px)}60%{transform:translate(2px,2px)}80%{transform:translate(2px,-2px)}}.glitch{animation:.3s ease-in-out glitch}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.shake{animation:.5s ease-in-out shake}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.bounce{animation:.6s ease-in-out bounce}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.cauldron-bubble,.steam,.cauldron-glow,.brewing,.liquid-swirl,.potion-glow,.potion-hover,.shimmer,.sparkle,.mystical-glow,.float,.spinner,.pulse,.dot-pulse{animation:none!important}}.navigation{background:linear-gradient(135deg,var(--color-cauldron-dark,#1a0f2e)0%,#2d1b4e 100%);border-bottom:2px solid var(--color-mystical-accent,#f59e0b);z-index:100;position:sticky;top:0;box-shadow:0 4px 20px #8b5cf64d}.nav-container{justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:1rem 2rem;display:flex;position:relative}.nav-right{align-items:center;gap:2rem;display:flex}.hamburger-button{cursor:pointer;z-index:101;background:0 0;border:none;flex-direction:column;gap:.375rem;padding:.5rem;transition:transform .3s;display:none}.hamburger-button:hover{transform:scale(1.1)}.hamburger-line{background:var(--color-potion-glow);border-radius:2px;width:1.5rem;height:2px;transition:all .3s;box-shadow:0 0 8px #8b5cf680}.hamburger-button.open .hamburger-line:first-child{transform:rotate(45deg)translateY(.5rem)}.hamburger-button.open .hamburger-line:nth-child(2){opacity:0}.hamburger-button.open .hamburger-line:nth-child(3){transform:rotate(-45deg)translateY(-.5rem)}.nav-logo{color:var(--color-potion-glow,#8b5cf6);text-shadow:0 0 10px #8b5cf680;align-items:center;gap:.5rem;font-size:1.5rem;font-weight:700;text-decoration:none;transition:all .3s;display:flex}.nav-logo-img{object-fit:contain;width:2rem;height:2rem}.nav-logo:hover{color:var(--color-mystical-accent,#f59e0b);text-shadow:0 0 20px #f59e0bcc;transform:scale(1.05)}.nav-menu{align-items:center;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.nav-link{color:#e0d4f7;white-space:nowrap;border-radius:8px;align-items:center;gap:.5rem;padding:.625rem 1rem;font-size:1rem;text-decoration:none;transition:all .3s;display:flex;position:relative}.nav-link:hover{color:var(--color-potion-glow,#8b5cf6);background:#8b5cf626}.more-dropdown{position:relative}.more-button{cursor:pointer;font-family:inherit;font-size:inherit;background:0 0;border:none}.dropdown-menu{z-index:1000;background:linear-gradient(135deg,#2d1b4e 0%,#1a0f2e 100%);border:1px solid #8b5cf64d;border-radius:8px;min-width:180px;margin:.5rem 0 0;padding:.5rem 0;list-style:none;animation:.2s ease-out dropdownFadeIn;position:absolute;top:100%;right:0;box-shadow:0 8px 24px #0006}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.dropdown-link{color:#e0d4f7;padding:.75rem 1rem;text-decoration:none;transition:all .2s;display:block}.dropdown-link:hover{color:var(--color-potion-glow,#8b5cf6);background:#8b5cf633}.nav-user{align-items:center;gap:1rem;display:flex}.user-email{color:#c4b5e0;font-size:.9rem}.logout-button{color:#fca5a5;cursor:pointer;white-space:nowrap;background:#ef444433;border:1px solid #ef4444;border-radius:8px;align-items:center;gap:.5rem;padding:.625rem 1rem;font-size:.9rem;transition:all .3s;display:flex}.logout-button:hover{background:#ef44444d;border-color:#fca5a5;box-shadow:0 4px 12px #ef44444d}@media (max-width:768px){.nav-container{padding:1rem}.hamburger-button{display:flex}.nav-right{background:linear-gradient(180deg,var(--color-cauldron-dark)0%,#2d1b4e 100%);z-index:100;flex-direction:column;gap:0;width:280px;height:100vh;padding:5rem 1.5rem 2rem;transition:right .3s;position:fixed;top:0;right:-100%;overflow-y:auto;box-shadow:-4px 0 20px #00000080}.nav-right.open{right:0}.nav-menu{flex-direction:column;gap:0;width:100%;margin-bottom:2rem}.nav-link{text-align:left;border-bottom:1px solid #8b5cf633;width:100%;padding:1rem;font-size:1rem}.dropdown-menu{box-shadow:none;background:#8b5cf60d;border:none;border-top:1px solid #8b5cf633;border-radius:0;margin:0;padding:0;position:static}.dropdown-link{border-bottom:1px solid #8b5cf61a;padding:.875rem 1.5rem}.nav-user{border-top:2px solid #8b5cf64d;flex-direction:column;gap:1rem;width:100%;padding-top:1rem}.user-email{text-align:center;font-size:.875rem}.logout-button{width:100%;padding:.75rem 1rem}.nav-overlay{z-index:99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000b3;display:none;position:fixed;inset:0}.nav-overlay.open{display:block}}@media (max-width:480px){.nav-logo{font-size:1.25rem}.nav-right{width:100%;right:-100%}.nav-right.open{right:0}}.error-boundary-container{background:linear-gradient(135deg,var(--color-background-primary)0%,var(--color-background-secondary)50%,var(--color-background-tertiary)100%);justify-content:center;align-items:center;min-height:100vh;padding:2rem;display:flex}.error-boundary-content{text-align:center;border-radius:var(--radius-xl);width:100%;max-width:600px;padding:var(--spacing-2xl);background:#1a0f2ecc;border:2px solid #ef444480;animation:.5s ease-out errorAppear;box-shadow:0 20px 60px #ef44444d,inset 0 1px #ffffff1a}@keyframes errorAppear{0%{opacity:0;transform:scale(.9)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}.error-icon{margin-bottom:var(--spacing-lg);font-size:5rem;animation:.5s ease-in-out shake}.error-title{color:var(--color-ingredient-missing);margin-bottom:var(--spacing-md);text-shadow:0 0 20px #ef444480;font-family:Cinzel,serif;font-size:2rem}.error-message{color:var(--color-text-secondary);margin-bottom:var(--spacing-xl);font-size:1.125rem;line-height:1.6}.error-details{margin-bottom:var(--spacing-xl);padding:var(--spacing-md);border-radius:var(--radius-md);text-align:left;background:#ef44441a;border:1px solid #ef44444d}.error-detail-text{color:var(--color-text-muted);word-break:break-word;margin:0;font-family:Courier New,monospace;font-size:.875rem}.error-actions{gap:var(--spacing-md);margin-bottom:var(--spacing-lg);flex-wrap:wrap;justify-content:center;display:flex}.btn-reset,.btn-reload{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md)var(--spacing-xl);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);border:none;font-size:1rem;font-weight:600;display:inline-flex}.btn-reset{background:linear-gradient(135deg,var(--color-potion-glow),#6d28d9);color:#fff;box-shadow:0 4px 15px #8b5cf666}.btn-reset:hover{transform:translateY(-2px);box-shadow:0 6px 25px #8b5cf699}.btn-reload{color:var(--color-mystical-accent);border:1px solid var(--color-mystical-accent);background:#f59e0b33}.btn-reload:hover{background:#f59e0b4d;transform:translateY(-2px);box-shadow:0 0 15px #f59e0b4d}.error-hint{color:var(--color-text-muted);margin:0;font-size:.875rem;font-style:italic}@media (max-width:768px){.error-boundary-content{padding:var(--spacing-xl)}.error-title{font-size:1.5rem}.error-message{font-size:1rem}.error-actions{flex-direction:column}.btn-reset,.btn-reload{justify-content:center;width:100%}}@media (prefers-reduced-motion:reduce){.error-boundary-content,.error-icon{animation:none}.btn-reset:hover,.btn-reload:hover{transform:none}}.auth-container{min-height:100vh;padding:var(--spacing-lg);justify-content:center;align-items:center;display:flex}.auth-card{border:2px solid var(--color-border-subtle);border-radius:var(--radius-xl);width:100%;max-width:480px;padding:var(--spacing-2xl);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#1a0f2ecc;position:relative;overflow:hidden;box-shadow:0 0 40px #8b5cf633,0 20px 60px #00000080}.auth-card:before{content:"";background:linear-gradient(45deg,var(--color-potion-glow),var(--color-mystical-accent),var(--color-ingredient-match),var(--color-potion-glow));border-radius:var(--radius-xl);opacity:0;z-index:-1;transition:opacity var(--transition-slow);background-size:300% 300%;animation:3s linear infinite mystical-border;position:absolute;inset:-2px}.auth-card:hover:before{opacity:.3}@keyframes mystical-border{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.auth-header{text-align:center;margin-bottom:var(--spacing-xl)}.auth-title{color:var(--color-text-primary);margin-bottom:var(--spacing-sm);text-shadow:0 0 20px #8b5cf699;letter-spacing:.05em;font-family:Cinzel,serif;font-size:2rem}.auth-subtitle{color:var(--color-text-secondary);margin:0;font-size:1rem}.auth-form{gap:var(--spacing-lg);flex-direction:column;display:flex}.form-group{gap:var(--spacing-sm);flex-direction:column;display:flex}.form-label{color:var(--color-text-primary);letter-spacing:.02em;text-transform:uppercase;font-size:.875rem;font-weight:600}.form-input{width:100%;padding:var(--spacing-md);border:2px solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text-primary);transition:all var(--transition-normal);background:#0f0a1e99;font-family:inherit;font-size:1rem}.mystical-input:focus{border-color:var(--color-potion-glow);background:#0f0a1ecc;outline:none;box-shadow:0 0 0 3px #8b5cf633,0 0 20px #8b5cf64d}.mystical-input::placeholder{color:var(--color-text-muted);font-style:italic}.mystical-input:disabled{opacity:.6;cursor:not-allowed}.input-error{border-color:var(--color-ingredient-missing)!important;box-shadow:0 0 0 3px #ef444433!important}.error-message{padding:var(--spacing-md);border:1px solid var(--color-ingredient-missing);border-radius:var(--radius-md);color:var(--color-ingredient-missing);align-items:center;gap:var(--spacing-sm);background:#ef44441a;font-size:.875rem;display:flex}.mystical-error{animation:.5s ease-in-out shake}.field-error{color:var(--color-ingredient-missing);margin-top:calc(var(--spacing-xs)*-1);font-size:.75rem}.password-requirements{padding:var(--spacing-sm);border-radius:var(--radius-sm);margin-top:var(--spacing-xs);background:#8b5cf60d;border:1px solid #8b5cf633}.requirements-title{color:var(--color-text-secondary);margin-bottom:var(--spacing-xs);font-size:.75rem;font-weight:600}.requirements-list{gap:var(--spacing-xs);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.requirements-list li{color:var(--color-text-muted);align-items:center;gap:var(--spacing-xs);transition:color var(--transition-fast);font-size:.75rem;display:flex}.requirements-list li:before{content:"○";color:var(--color-text-muted);transition:all var(--transition-fast)}.requirements-list li.requirement-met{color:var(--color-ingredient-match)}.requirements-list li.requirement-met:before{content:"✓";color:var(--color-ingredient-match);font-weight:700}.btn-brew{width:100%;padding:var(--spacing-md)var(--spacing-lg);letter-spacing:.05em;text-transform:uppercase;background:linear-gradient(135deg,var(--color-potion-glow)0%,#6d28d9 100%);color:#fff;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);justify-content:center;align-items:center;gap:var(--spacing-sm);border:none;font-family:Cinzel,serif;font-size:1.125rem;font-weight:700;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 15px #8b5cf666,inset 0 1px #fff3}.btn-brew:before{content:"";background:linear-gradient(90deg,#0000,#ffffff4d,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.btn-brew:hover{transform:translateY(-2px);box-shadow:0 6px 25px #8b5cf699,inset 0 1px #ffffff4d}.btn-brew:hover:before{left:100%}.btn-brew:active{transform:translateY(0)}.btn-brew:disabled{opacity:.7;cursor:not-allowed;transform:none!important}.auth-footer{text-align:center;margin-top:var(--spacing-md)}.auth-link-text{color:var(--color-text-secondary);margin:0;font-size:.875rem}.auth-link{color:var(--color-potion-glow);transition:all var(--transition-fast);font-weight:600;text-decoration:none;position:relative}.auth-link:after{content:"";background:var(--color-potion-glow);width:0;height:2px;transition:width var(--transition-normal);position:absolute;bottom:-2px;left:0}.auth-link:hover{color:var(--color-mystical-accent);text-shadow:0 0 10px #8b5cf680}.auth-link:hover:after{width:100%}.demo-hint{margin-top:var(--spacing-xl);padding:var(--spacing-md);border:1px dashed var(--color-mystical-accent);border-radius:var(--radius-md);text-align:center;background:#f59e0b1a}.demo-hint-title{color:var(--color-mystical-accent);margin-bottom:var(--spacing-xs);text-transform:uppercase;letter-spacing:.05em;font-size:.875rem;font-weight:700}.demo-hint-text{color:var(--color-text-secondary);margin:0;font-size:.875rem;line-height:1.6}.demo-hint-text code{border-radius:var(--radius-sm);color:var(--color-mystical-accent);background:#f59e0b33;padding:2px 6px;font-family:Courier New,monospace;font-size:.8125rem}@media (max-width:640px){.auth-container{padding:var(--spacing-md)}.auth-card{padding:var(--spacing-xl)}.auth-title{font-size:1.75rem}.auth-subtitle{font-size:.875rem}}@media (prefers-reduced-motion:reduce){.auth-card:before,.btn-brew:before,.spinner,.mystical-error{animation:none!important}}.image-upload-container{width:100%;margin-bottom:var(--spacing-lg)}.image-upload-label{gap:var(--spacing-xs);margin-bottom:var(--spacing-sm);flex-direction:column;font-family:Cinzel,serif;display:flex}.image-upload-zone{border:2px dashed var(--color-border-subtle);border-radius:var(--radius-lg);cursor:pointer;min-height:250px;transition:all var(--transition-normal);background:#1a0f2e66;position:relative;overflow:hidden}.image-upload-zone:hover{border-color:var(--color-potion-glow);background:#1a0f2e99;box-shadow:0 0 20px #8b5cf633}.image-upload-zone.dragging{border-color:var(--color-mystical-accent);background:#f59e0b1a;transform:scale(1.02);box-shadow:0 0 30px #f59e0b4d,inset 0 0 30px #f59e0b1a}.image-upload-zone.has-image{cursor:default;border-style:solid;border-color:var(--color-ingredient-match)}.file-input-hidden{display:none}.upload-prompt{height:100%;min-height:250px;padding:var(--spacing-xl);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.upload-icon{margin-bottom:var(--spacing-md);font-size:4rem;animation:3s ease-in-out infinite float}.upload-text{color:var(--color-text-primary);margin-bottom:var(--spacing-xs);font-size:1.125rem;font-weight:600}.upload-text-secondary{color:var(--color-text-muted);margin-bottom:var(--spacing-md);font-size:.9375rem}.upload-formats{color:var(--color-text-muted);padding:var(--spacing-xs)var(--spacing-md);border-radius:var(--radius-full);background:#8b5cf61a;border:1px solid #8b5cf64d;font-size:.875rem}.image-preview-container{width:100%;height:100%;min-height:250px;position:relative}.image-preview{object-fit:cover;border-radius:var(--radius-lg);width:100%;height:100%;min-height:250px}.image-overlay{padding:var(--spacing-md);background:linear-gradient(#0000 0%,#0f0a1eb3 50%,#0f0a1ef2 100%);justify-content:space-between;align-items:center;display:flex;position:absolute;bottom:0;left:0;right:0}.image-filename{color:var(--color-text-primary);text-overflow:ellipsis;white-space:nowrap;max-width:60%;font-size:.875rem;font-weight:500;overflow:hidden}.btn-clear-image{padding:var(--spacing-xs)var(--spacing-md);color:var(--color-ingredient-missing);border:1px solid var(--color-ingredient-missing);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);background:#ef444433;font-size:.875rem;font-weight:600}.btn-clear-image:hover{background:#ef44444d;transform:translateY(-1px);box-shadow:0 0 15px #ef44444d}.processing-container{height:100%;min-height:250px;padding:var(--spacing-xl);flex-direction:column;justify-content:center;align-items:center;display:flex}.processing-animation{width:80px;height:80px;margin-bottom:var(--spacing-lg);position:relative}.processing-animation .cauldron-bubble{background:radial-gradient(circle,var(--color-potion-glow)0%,#8b5cf680 100%);width:20px;height:20px;box-shadow:0 0 20px var(--color-potion-glow);border-radius:50%;position:absolute}.processing-animation .cauldron-bubble:first-child{bottom:0;left:10px}.processing-animation .cauldron-bubble:nth-child(2){bottom:0;left:30px}.processing-animation .cauldron-bubble:nth-child(3){bottom:0;left:50px}.processing-text{color:var(--color-potion-glow);margin-bottom:var(--spacing-xs);text-shadow:0 0 10px #8b5cf680;font-size:1.125rem;font-weight:600}.processing-subtext{color:var(--color-text-muted);margin-bottom:var(--spacing-md);font-size:.9375rem;font-style:italic}.processing-dots{gap:var(--spacing-sm);display:flex}.processing-dots .dot{background:var(--color-potion-glow);width:10px;height:10px;box-shadow:0 0 10px var(--color-potion-glow);border-radius:50%}.upload-success-message{align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-sm);padding:var(--spacing-sm)var(--spacing-md);border:1px solid var(--color-ingredient-match);border-radius:var(--radius-md);background:#10b9811a;animation:.4s cubic-bezier(.34,1.56,.64,1) forwards chip-appear;display:flex}.success-icon{color:var(--color-ingredient-match);font-size:1.25rem}.success-text{color:var(--color-ingredient-match);font-size:.9375rem;font-weight:600}@media (max-width:768px){.image-upload-zone{min-height:200px}.upload-prompt{min-height:200px;padding:var(--spacing-lg)}.upload-icon{font-size:3rem}.image-preview-container,.image-preview,.processing-container{min-height:200px}}.image-upload-zone:focus-visible{outline:2px solid var(--color-potion-glow);outline-offset:2px}.btn-clear-image:focus-visible{outline:2px solid var(--color-ingredient-missing);outline-offset:2px}.ingredient-list-container{width:100%;margin-bottom:var(--spacing-xl)}.ingredient-list-empty{padding:var(--spacing-xl);text-align:center;border:2px dashed var(--color-border-subtle);border-radius:var(--radius-lg);background:#1a0f2e66}.empty-message{color:var(--color-text-muted);margin:0;font-style:italic}.ingredient-list-header{margin-bottom:var(--spacing-md);justify-content:space-between;align-items:center;display:flex}.ingredient-list-title{color:var(--color-text-primary);text-shadow:0 0 10px #8b5cf64d;margin:0;font-size:1.25rem;font-weight:600}.ingredient-header-actions{gap:var(--spacing-md);align-items:center;display:flex}.ingredient-badges{gap:var(--spacing-sm);align-items:center;display:flex}.clear-all-btn{border-radius:var(--radius-md);color:#ef4444e6;cursor:pointer;background:#ef444426;border:1px solid #ef44444d;align-items:center;gap:.375rem;padding:.5rem 1rem;font-size:.875rem;font-weight:600;transition:all .2s;display:flex}.clear-all-btn:hover{background:#ef444440;border-color:#ef444480;transform:translateY(-1px);box-shadow:0 4px 12px #ef444433}.clear-all-btn:active{transform:translateY(0)}.ingredient-count-badge{min-width:32px;height:32px;padding:0 var(--spacing-sm);background:linear-gradient(135deg,var(--color-potion-glow)0%,#6d28d9 100%);color:#fff;border-radius:var(--radius-full);justify-content:center;align-items:center;font-size:.875rem;font-weight:700;animation:2s ease-in-out infinite pulse;display:flex;box-shadow:0 0 15px #8b5cf680}.ingredient-quantity-badge{min-width:32px;height:32px;padding:0 var(--spacing-sm);background:linear-gradient(135deg,var(--color-mystical-accent)0%,#d97706 100%);color:#fff;border-radius:var(--radius-full);justify-content:center;align-items:center;font-size:.75rem;font-weight:600;display:flex;box-shadow:0 0 15px #f59e0b66}.ingredient-chips-container{gap:var(--spacing-sm);padding:var(--spacing-md);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);background:#1a0f2e66;flex-wrap:wrap;min-height:80px;display:flex}.ingredient-chip{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm)var(--spacing-md);border:1px solid var(--color-potion-glow);border-radius:var(--radius-full);color:var(--color-text-primary);transition:all var(--transition-normal);background:linear-gradient(135deg,#8b5cf64d 0%,#6d28d94d 100%);font-size:.9375rem;font-weight:500;animation:.4s cubic-bezier(.34,1.56,.64,1) forwards chip-appear;display:inline-flex;box-shadow:0 0 10px #8b5cf64d}.ingredient-chip.abundance-low{border-width:1px;box-shadow:0 0 10px #8b5cf64d}.ingredient-chip.abundance-medium{background:linear-gradient(135deg,#8b5cf666 0%,#6d28d966 100%);border-width:2px;box-shadow:0 0 15px #8b5cf666}.ingredient-chip.abundance-high{background:linear-gradient(135deg,#8b5cf680 0%,#6d28d980 100%);border-width:2px;animation:.4s cubic-bezier(.34,1.56,.64,1) forwards chip-appear,2s ease-in-out infinite pulse-glow;box-shadow:0 0 20px #8b5cf699}@keyframes pulse-glow{0%,to{box-shadow:0 0 20px #8b5cf699}50%{box-shadow:0 0 25px #8b5cf6cc}}.ingredient-chip:hover{background:linear-gradient(135deg,#8b5cf666 0%,#6d28d966 100%);transform:translateY(-2px);box-shadow:0 0 15px #8b5cf680}.chip-text{-webkit-user-select:none;user-select:none;align-items:center;gap:var(--spacing-xs);display:flex}.chip-quantity{color:var(--color-mystical-accent);font-size:.8125rem;font-weight:600}.chip-controls{align-items:center;gap:var(--spacing-sm);display:flex}.quantity-stepper{border-radius:var(--radius-full);background:#1a0f2e99;align-items:center;gap:2px;padding:2px;display:flex}.stepper-btn{border:1px solid var(--color-potion-glow);width:20px;height:20px;color:var(--color-potion-glow);cursor:pointer;transition:all var(--transition-fast);background:#8b5cf64d;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:.875rem;font-weight:700;line-height:1;display:flex}.stepper-btn:hover:not(:disabled){background:#8b5cf680;transform:scale(1.1);box-shadow:0 0 10px #8b5cf680}.stepper-btn:active:not(:disabled){transform:scale(.95)}.stepper-btn:disabled{opacity:.3;cursor:not-allowed}.quantity-display{text-align:center;min-width:20px;color:var(--color-text-primary);padding:0 4px;font-size:.8125rem;font-weight:600}.chip-remove-btn{border:1px solid var(--color-ingredient-missing);width:20px;height:20px;color:var(--color-ingredient-missing);cursor:pointer;transition:all var(--transition-fast);background:#ef44444d;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:.75rem;font-weight:700;display:flex}.chip-remove-btn:hover{background:#ef444480;transform:scale(1.1);box-shadow:0 0 10px #ef444480}.chip-remove-btn:active{transform:scale(.95)}.add-ingredient-chip{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm)var(--spacing-md);border:2px dashed var(--color-mystical-accent);border-radius:var(--radius-full);color:var(--color-mystical-accent);cursor:pointer;transition:all var(--transition-normal);background:#f59e0b33;font-size:.9375rem;font-weight:600;display:inline-flex}.add-ingredient-chip:hover{background:#f59e0b4d;border-style:solid;transform:translateY(-2px);box-shadow:0 0 15px #f59e0b4d}.add-icon{font-size:1.25rem;font-weight:700}.add-text{-webkit-user-select:none;user-select:none}.add-ingredient-form{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs);border:2px solid var(--color-mystical-accent);border-radius:var(--radius-full);background:#1a0f2ecc;display:inline-flex;box-shadow:0 0 15px #f59e0b4d}.add-ingredient-input{padding:var(--spacing-xs)var(--spacing-sm);min-width:120px;color:var(--color-text-primary);background:0 0;border:none;outline:none;font-size:.9375rem}.add-ingredient-input::placeholder{color:var(--color-text-muted)}.add-ingredient-quantity{padding:var(--spacing-xs)var(--spacing-xs);border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);width:50px;color:var(--color-text-primary);text-align:center;background:#1a0f2e99;outline:none;font-size:.875rem}.add-ingredient-quantity:focus{border-color:var(--color-mystical-accent);box-shadow:0 0 5px #f59e0b4d}.add-ingredient-quantity::placeholder{color:var(--color-text-muted)}.add-ingredient-actions{gap:var(--spacing-xs);display:flex}.btn-add-confirm,.btn-add-cancel{cursor:pointer;width:28px;height:28px;transition:all var(--transition-fast);border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:.875rem;font-weight:700;display:flex}.btn-add-confirm{color:var(--color-ingredient-match);border:1px solid var(--color-ingredient-match);background:#10b9814d}.btn-add-confirm:hover:not(:disabled){background:#10b98180;transform:scale(1.1);box-shadow:0 0 10px #10b98180}.btn-add-confirm:disabled{opacity:.5;cursor:not-allowed}.btn-add-cancel{color:var(--color-ingredient-missing);border:1px solid var(--color-ingredient-missing);background:#ef44444d}.btn-add-cancel:hover{background:#ef444480;transform:scale(1.1);box-shadow:0 0 10px #ef444480}.ingredient-list-footer{margin-top:var(--spacing-sm);padding:0 var(--spacing-xs)}.footer-hint{color:var(--color-text-muted);margin:0;font-size:.875rem;font-style:italic}@media (max-width:768px){.ingredient-list-header{align-items:flex-start;gap:var(--spacing-sm);flex-direction:column}.ingredient-chip{flex-wrap:wrap;font-size:.875rem}.add-ingredient-input{min-width:100px}.add-ingredient-quantity{width:45px}.quantity-stepper{gap:1px}.stepper-btn{width:18px;height:18px;font-size:.75rem}}.chip-remove-btn:focus-visible,.add-ingredient-chip:focus-visible,.btn-add-confirm:focus-visible,.btn-add-cancel:focus-visible{outline-offset:2px;outline:2px solid}.add-ingredient-input:focus-visible{outline:2px solid var(--color-mystical-accent);outline-offset:2px;border-radius:var(--radius-sm)}@media (prefers-reduced-motion:reduce){.ingredient-chip,.ingredient-count-badge{animation:none}.ingredient-chip.abundance-high{animation:.4s cubic-bezier(.34,1.56,.64,1) forwards chip-appear}.ingredient-chip:hover,.add-ingredient-chip:hover,.chip-remove-btn:hover,.stepper-btn:hover{transform:none}}.brew-button{justify-content:center;align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg)var(--spacing-2xl);background:linear-gradient(135deg,var(--color-potion-glow)0%,#6d28d9 50%,var(--color-mystical-accent)100%);color:#fff;border-radius:var(--radius-xl);cursor:pointer;transition:all var(--transition-normal);background-size:200% 200%;border:none;font-family:Cinzel,serif;font-size:1.25rem;font-weight:700;animation:3s ease-in-out infinite brew-pulse;display:inline-flex;position:relative;overflow:hidden;box-shadow:0 8px 30px #8b5cf680,0 0 40px #8b5cf64d,inset 0 0 20px #ffffff1a}.brew-button:hover:not(:disabled){animation:1.5s ease-in-out infinite brew-pulse;transform:translateY(-4px)scale(1.05);box-shadow:0 12px 40px #8b5cf6b3,0 0 60px #8b5cf680,inset 0 0 30px #fff3}.brew-button:active:not(:disabled){transform:translateY(-2px)scale(1.02)}.brew-button:disabled{opacity:.6;cursor:not-allowed;animation:none;box-shadow:0 4px 15px #8b5cf64d,0 0 20px #8b5cf633}.brew-button.brewing{background-position:100%;animation:2s linear infinite brew-spin,1s ease-in-out infinite brew-pulse}.brew-button-icon{transition:transform var(--transition-normal);font-size:2rem;display:inline-block}.brew-button:hover:not(:disabled) .brew-button-icon{transform:scale(1.2)rotate(10deg)}.brew-button.brewing .brew-button-icon{animation:2s ease-in-out infinite icon-float}.brew-button-text{letter-spacing:.05em;text-shadow:0 2px 10px #00000080;font-size:1.25rem}.brew-glow{border-radius:var(--radius-xl);pointer-events:none;opacity:0;width:100%;height:100%;position:absolute}.brew-glow-1{background:radial-gradient(circle at 30%,#8b5cf699 0%,#0000 50%);animation:3s ease-in-out infinite glow-pulse-1}.brew-glow-2{background:radial-gradient(circle at 70%,#f59e0b99 0%,#0000 50%);animation:3s ease-in-out 1s infinite glow-pulse-2}.brew-glow-3{background:radial-gradient(circle,#10b98166 0%,#0000 60%);animation:3s ease-in-out 2s infinite glow-pulse-3}@keyframes brew-pulse{0%,to{box-shadow:0 8px 30px #8b5cf680,0 0 40px #8b5cf64d,inset 0 0 20px #ffffff1a}50%{box-shadow:0 8px 35px #8b5cf6b3,0 0 50px #8b5cf680,inset 0 0 25px #ffffff26}}@keyframes brew-spin{0%{background-position:0%}to{background-position:200%}}@keyframes icon-float{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-5px)scale(1.1)}}@keyframes glow-pulse-1{0%,to{opacity:0;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}@keyframes glow-pulse-2{0%,to{opacity:0;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}@keyframes glow-pulse-3{0%,to{opacity:0;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}@media (max-width:768px){.brew-button{padding:var(--spacing-md)var(--spacing-xl);font-size:1.125rem}.brew-button-icon{font-size:1.75rem}.brew-button-text{font-size:1.125rem}}.brew-button:focus-visible{outline:3px solid var(--color-mystical-accent);outline-offset:4px}@media (prefers-reduced-motion:reduce){.brew-button,.brew-button.brewing,.brew-button-icon,.brew-glow-1,.brew-glow-2,.brew-glow-3{animation:none!important}}.brewing-animation-container{min-height:500px;padding:var(--spacing-2xl);border-radius:var(--radius-xl);border:2px solid var(--color-border-glow);background:#1a0f2e99;justify-content:center;align-items:center;display:flex;box-shadow:0 0 40px #8b5cf64d,inset 0 0 40px #8b5cf61a}.brewing-content{align-items:center;gap:var(--spacing-xl);flex-direction:column;display:flex}.cauldron{justify-content:center;align-items:center;width:200px;height:200px;display:flex;position:relative}.cauldron-body{border:3px solid var(--color-border-medium);background:linear-gradient(#2d1b4e 0%,#1a0f2e 50%,#0f0a1e 100%);border-radius:0 0 80px 80px;width:160px;height:120px;position:relative;overflow:hidden;box-shadow:0 10px 30px #00000080,inset 0 -20px 40px #8b5cf64d}.cauldron-liquid{background:linear-gradient(#8b5cf699 0%,#6d28d9cc 100%);border-radius:0 0 80px 80px;height:70%;animation:4s ease-in-out infinite liquid-swirl;position:absolute;bottom:0;left:0;right:0}.liquid-surface{background:radial-gradient(#8b5cf6cc 0%,#8b5cf666 100%);height:20px;animation:2s ease-in-out infinite surface-ripple;position:absolute;top:0;left:0;right:0}@keyframes surface-ripple{0%,to{opacity:.8;transform:scaleX(1)}50%{opacity:1;transform:scaleX(1.1)}}.bubble{background:radial-gradient(circle at 30% 30%,#fffc 0%,#8b5cf699 50%,#8b5cf64d 100%);border-radius:50%;width:12px;height:12px;animation:2s ease-in-out infinite bubble;position:absolute;bottom:10px;box-shadow:0 0 10px #8b5cf6cc,inset -2px -2px 4px #ffffff80}.bubble-1{animation-duration:2.2s;animation-delay:0s;left:30%}.bubble-2{animation-duration:2.5s;animation-delay:.4s;left:50%}.bubble-3{animation-duration:2s;animation-delay:.8s;left:70%}.bubble-4{width:8px;height:8px;animation-duration:2.3s;animation-delay:1.2s;left:40%}.bubble-5{width:10px;height:10px;animation-duration:2.7s;animation-delay:1.6s;left:60%}.steam-container{pointer-events:none;width:100px;height:100px;position:absolute;top:-60px;left:50%;transform:translate(-50%)}.steam{filter:blur(8px);background:radial-gradient(#8b5cf666 0%,#8b5cf633 30%,#0000 70%);border-radius:50%;width:40px;height:60px;animation:3s ease-out infinite steam-rise;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.steam-1{animation-duration:3s;animation-delay:0s}.steam-2{animation-duration:3.5s;animation-delay:.8s;left:40%}.steam-3{animation-duration:4s;animation-delay:1.6s;left:60%}.brewing-title{color:var(--color-text-primary);text-align:center;text-shadow:0 0 20px #8b5cf699;margin:0;font-size:2rem;font-weight:700;animation:2s ease-in-out infinite text-glow}.brewing-subtitle{color:var(--color-text-muted);text-align:center;margin:0;font-size:1.125rem;font-style:italic}@keyframes text-glow{0%,to{text-shadow:0 0 30px #8b5cf699}50%{text-shadow:0 0 40px #8b5cf6e6}}.brewing-timer{color:var(--color-potion-glow);text-align:center;margin-top:var(--spacing-sm);padding:var(--spacing-sm)var(--spacing-md);border-radius:var(--radius-md);font-variant-numeric:tabular-nums;background:#8b5cf61a;border:1px solid #8b5cf64d;min-width:80px;font-size:1.5rem;font-weight:600}.brewing-dots{gap:var(--spacing-sm);margin-top:var(--spacing-md);display:flex}.brewing-dots .dot{background:var(--color-potion-glow);width:12px;height:12px;box-shadow:0 0 15px var(--color-potion-glow);border-radius:50%}@media (max-width:768px){.brewing-animation-container{min-height:400px;padding:var(--spacing-xl)}.cauldron{width:160px;height:160px}.cauldron-body{width:130px;height:100px}.brewing-title{font-size:1.5rem}.brewing-subtitle{font-size:1rem}}@media (prefers-reduced-motion:reduce){.bubble,.steam,.liquid-swirl,.surface-ripple,.text-glow,.dot-pulse{animation:none!important}.cauldron-liquid{animation:none}}.cauldron-container{width:100%;max-width:900px;padding:var(--spacing-2xl)var(--spacing-lg);margin:0 auto}.cauldron-header{text-align:center;margin-bottom:var(--spacing-2xl)}.cauldron-title{color:var(--color-text-primary);margin-bottom:var(--spacing-md);text-shadow:0 0 30px #8b5cf699;font-size:2.5rem;font-weight:700;animation:3s ease-in-out infinite text-glow}.cauldron-subtitle{color:var(--color-text-secondary);margin:0;font-size:1.125rem}.cauldron-visual{width:160px;height:220px;margin:0 auto var(--spacing-xl);filter:drop-shadow(0 15px 40px #8b5cf699);flex-direction:column;align-items:center;animation:4s ease-in-out infinite bottle-float;display:flex;position:relative}@keyframes bottle-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.cauldron-rim{z-index:5;background:linear-gradient(#d97706,#b45309,#92400e);border:2px solid #78350f;border-radius:8px 8px 0 0;width:45px;height:28px;position:absolute;top:0;left:50%;transform:translate(-50%);box-shadow:0 3px 8px #00000080,inset 0 -3px 6px #0000004d,inset 0 2px 4px #ffc8644d}.cauldron-rim:before{content:"";background:#0000004d;height:1px;position:absolute;top:8px;left:6px;right:6px;box-shadow:0 6px #0000004d,0 12px #0000004d}.cauldron-rim:after{content:"";z-index:4;background:linear-gradient(#8b5cf64d 0%,#8b5cf680 100%);border:2px solid #8b5cf699;border-top:none;width:38px;height:22px;position:absolute;top:100%;left:50%;transform:translate(-50%);box-shadow:inset 0 2px 8px #8b5cf64d,0 2px 8px #0000004d}.cauldron-bowl{z-index:3;background:linear-gradient(135deg,#8b5cf633 0%,#8b5cf64d 50%,#8b5cf633 100%);border:3px solid #8b5cf6b3;border-radius:50%;width:150px;height:160px;margin-top:22px;position:relative;overflow:hidden;box-shadow:0 20px 60px #000c,0 0 50px #8b5cf699,inset 0 0 80px #8b5cf626,inset -30px 0 50px #a78bfa40,inset 30px 0 50px #6d28d926}.cauldron-bowl:before{content:"";background:linear-gradient(135deg,transparent 45%,var(--color-ingredient-match)45%,var(--color-ingredient-match)55%,transparent 55%),linear-gradient(-135deg,transparent 45%,var(--color-ingredient-match)45%,var(--color-ingredient-match)55%,transparent 55%);width:90px;height:28px;filter:drop-shadow(0 0 18px var(--color-ingredient-match))brightness(1.3);z-index:20;pointer-events:none;background-position:0 0,9px 0;background-repeat:repeat-x;background-size:18px 18px;position:absolute;top:60%;left:50%;transform:translate(-50%)}.cauldron-bowl:after{content:"";z-index:1;background:radial-gradient(#8b5cf680 0%,#8b5cf64d 50%,#0000 100%);border-radius:50%;width:75%;height:15px;position:absolute;bottom:-5px;left:50%;transform:translate(-50%);box-shadow:0 5px 15px #0009}.cauldron-glow-effect{z-index:20;width:100px;height:80px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.cauldron-glow-effect:before{content:"";border-left:12px solid #0000;border-right:12px solid #0000;border-bottom:18px solid var(--color-ingredient-match);width:0;height:0;filter:drop-shadow(0 0 15px var(--color-ingredient-match))brightness(1.3);animation:3s ease-in-out infinite face-glow;position:absolute;top:10px;left:15px}@keyframes face-glow{0%,to{opacity:1;filter:drop-shadow(0 0 15px var(--color-ingredient-match))brightness(1.3)}50%{opacity:.9;filter:drop-shadow(0 0 25px var(--color-ingredient-match))brightness(1.5)}}.cauldron-glow-effect:after{content:"";border-left:12px solid #0000;border-right:12px solid #0000;border-bottom:18px solid var(--color-ingredient-match);width:0;height:0;filter:drop-shadow(0 0 15px var(--color-ingredient-match))brightness(1.3);position:absolute;top:10px;right:15px}.cauldron-visual:before{content:"";border-left:8px solid #0000;border-right:8px solid #0000;border-top:12px solid var(--color-ingredient-match);width:0;height:0;filter:drop-shadow(0 0 12px var(--color-ingredient-match))brightness(1.3);z-index:20;position:absolute;top:50%;left:50%;transform:translate(-50%,-15px)}.cauldron-visual:after{content:"";z-index:4;background:linear-gradient(#8b5cf680 0%,#8b5cf6bf 25%,#7c3aede6 60%,#6d28d9 100%);border-radius:50%;width:130px;height:90px;animation:3s ease-in-out infinite potion-swirl;position:absolute;bottom:40px;left:50%;transform:translate(-50%);box-shadow:0 0 50px #8b5cf6e6,inset 0 -30px 40px #6d28d9b3,inset 0 15px 30px #a78bfa80}@keyframes potion-swirl{0%,to{transform:translate(-50%)translateY(0);box-shadow:0 0 50px #8b5cf6e6,inset 0 -30px 40px #6d28d9b3,inset 0 15px 30px #a78bfa80}50%{transform:translate(-50%)translateY(-3px);box-shadow:0 0 60px #8b5cf6,inset 0 -30px 45px #6d28d9e6,inset 0 15px 35px #a78bfab3}}.cauldron-container:before{content:"";z-index:15;pointer-events:none;background:radial-gradient(circle,#8b5cf6cc,#8b5cf64d);border:1px solid #8b5cf699;border-radius:50%;width:10px;height:10px;animation:3s ease-in-out infinite bubble-rise-1;position:absolute;top:395px;left:calc(50% - 20px);box-shadow:0 0 10px #8b5cf6cc,inset -2px -2px 4px #ffffff4d}@keyframes bubble-rise-1{0%{opacity:0;transform:translateY(0)scale(.5)}20%{opacity:1}80%{opacity:.7}to{opacity:0;transform:translateY(-50px)translate(8px)scale(1.2)}}.cauldron-container:after{content:"";z-index:15;pointer-events:none;background:radial-gradient(circle,#8b5cf6cc,#8b5cf64d);border:1px solid #8b5cf699;border-radius:50%;width:8px;height:8px;animation:3s ease-in-out 1.5s infinite bubble-rise-2;position:absolute;top:395px;right:calc(50% - 20px);box-shadow:0 0 10px #8b5cf6cc,inset -2px -2px 4px #ffffff4d}@keyframes bubble-rise-2{0%{opacity:0;transform:translateY(0)scale(.5)}20%{opacity:1}80%{opacity:.7}to{opacity:0;transform:translateY(-45px)translate(-6px)scale(1.1)}}.cauldron-inputs{margin-bottom:var(--spacing-xl)}.input-divider{text-align:center;margin:var(--spacing-xl)0;position:relative}.input-divider:before,.input-divider:after{content:"";background:linear-gradient(to right,transparent,var(--color-border-subtle),transparent);width:40%;height:1px;position:absolute;top:50%}.input-divider:before{left:0}.input-divider:after{right:0}.divider-text{padding:var(--spacing-xs)var(--spacing-md);border:1px solid var(--color-border-subtle);border-radius:var(--radius-full);color:var(--color-text-muted);letter-spacing:.1em;background:#1a0f2ecc;font-size:.875rem;font-weight:600;display:inline-block}.cauldron-preview{margin-bottom:var(--spacing-xl);animation:.4s cubic-bezier(.34,1.56,.64,1) forwards chip-appear}.cauldron-action{align-items:center;gap:var(--spacing-md);margin-top:var(--spacing-2xl);padding-top:var(--spacing-xl);border-top:1px solid var(--color-border-subtle);flex-direction:column;display:flex}.brew-hint{color:var(--color-text-muted);text-align:center;margin:0;font-size:.9375rem;font-style:italic}@media (max-width:768px){.cauldron-container{padding:var(--spacing-xl)var(--spacing-md)}.cauldron-title{font-size:2rem}.cauldron-subtitle{font-size:1rem}.cauldron-visual{width:140px;height:190px}.cauldron-rim{width:40px;height:24px}.cauldron-rim:after{width:34px;height:20px}.cauldron-bowl{width:130px;height:140px;margin-top:20px}.cauldron-glow-effect{width:85px;height:70px}.cauldron-glow-effect:before{border-bottom-width:15px;border-left-width:10px;border-right-width:10px;top:8px;left:12px}.cauldron-glow-effect:after{border-bottom-width:15px;border-left-width:10px;border-right-width:10px;top:8px;right:12px}.cauldron-visual:before{border-top-width:10px;border-left-width:7px;border-right-width:7px;transform:translate(-50%,-12px)}.cauldron-visual:after{width:95px;height:70px;bottom:26px}.cauldron-bowl:before{background-position:0 0,7.5px 0;background-size:15px 15px;width:75px;height:24px}.cauldron-container:before{width:9px;height:9px;top:170px;left:calc(50% - 18px)}.cauldron-container:after{width:7px;height:7px;top:170px;right:calc(50% - 18px)}.input-divider:before,.input-divider:after{width:35%}}@media (max-width:480px){.cauldron-title{font-size:1.75rem}.cauldron-visual{width:130px;height:180px;margin-bottom:var(--spacing-lg)}.cauldron-rim{width:38px;height:22px}.cauldron-rim:after{width:32px;height:18px}.cauldron-bowl{width:120px;height:130px;margin-top:18px}.cauldron-glow-effect{width:80px;height:65px}.cauldron-glow-effect:before{border-bottom-width:14px;border-left-width:9px;border-right-width:9px;top:7px;left:11px}.cauldron-glow-effect:after{border-bottom-width:14px;border-left-width:9px;border-right-width:9px;top:7px;right:11px}.cauldron-visual:before{border-top-width:9px;border-left-width:6px;border-right-width:6px;transform:translate(-50%,-11px)}.cauldron-visual:after{width:90px;height:68px;bottom:24px}.cauldron-bowl:before{background-position:0 0,7px 0;background-size:14px 14px;width:70px;height:22px}.cauldron-container:before{width:8px;height:8px;top:160px;left:calc(50% - 16px)}.cauldron-container:after{width:6px;height:6px;top:160px;right:calc(50% - 16px)}}@media (prefers-reduced-motion:reduce){.cauldron-title,.cauldron-glow-effect,.cauldron-preview{animation:none!important}}.waste-score-bar{width:100%;margin:.75rem 0}.waste-score-label{justify-content:space-between;align-items:center;margin-bottom:.5rem;font-size:.875rem;display:flex}.label-text{color:var(--color-mystical-accent);text-transform:uppercase;letter-spacing:.05em;font-weight:500}.score-value{color:var(--color-potion-glow);font-size:1rem;font-weight:700}.score-bar-container{background:#1a0f2e99;border:1px solid #8b5cf64d;border-radius:.5rem;width:100%;height:1.25rem;position:relative;overflow:hidden;box-shadow:inset 0 2px 4px #0000004d}.score-bar-fill{border-radius:.5rem;height:100%;transition:width 1s ease-out;animation:1.5s ease-out fillBar;position:relative}.score-bar-fill.excellent{background:linear-gradient(90deg,#10b981,#34d399);box-shadow:0 0 10px #10b98199}.score-bar-fill.good{background:linear-gradient(90deg,#8b5cf6,#a78bfa);box-shadow:0 0 10px #8b5cf699}.score-bar-fill.fair{background:linear-gradient(90deg,#f59e0b,#fbbf24);box-shadow:0 0 10px #f59e0b99}.score-bar-fill.poor{background:linear-gradient(90deg,#ef4444,#f87171);box-shadow:0 0 10px #ef444499}.score-bar-glow{background:linear-gradient(90deg,#0000,#ffffff4d,#0000);animation:2s infinite shimmer;position:absolute;inset:0}@keyframes fillBar{0%{width:0}}.potion-card{cursor:pointer;flex-direction:column;height:100%;transition:transform .3s,filter .3s;animation:.6s ease-out potionReveal;display:flex;position:relative}.potion-card:hover{filter:brightness(1.1);transform:translateY(-8px)scale(1.02)}.potion-card:hover .potion-glow{opacity:1;transform:translate(-50%,-50%)scale(1.1)}.potion-bottle{z-index:1;flex-direction:column;flex:1;align-items:center;display:flex;position:relative}.bottle-top{background:linear-gradient(#4a3728,#2d1f16);border:1px solid #8b5cf64d;border-radius:.25rem .25rem 0 0;width:40%;height:1rem;box-shadow:0 2px 4px #0000004d}.bottle-body{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#1a0f2ef2 0%,#2a1942f2 100%);border:2px solid #8b5cf666;border-radius:1rem;flex-direction:column;flex:1;width:100%;display:flex;overflow:hidden;box-shadow:0 8px 32px #8b5cf633,inset 0 2px 8px #8b5cf61a}.bottle-bottom{background:linear-gradient(#8b5cf64d,#0000);border-radius:0 0 .5rem .5rem;width:60%;height:.5rem}.potion-image-container{background:linear-gradient(135deg,#1a0f2e,#2a1942);width:100%;height:200px;position:relative;overflow:hidden}.potion-image{object-fit:cover;width:100%;height:100%;transition:transform .3s}.potion-card:hover .potion-image{transform:scale(1.05)}.potion-image-placeholder{background:linear-gradient(135deg,#1a0f2e,#2a1942);justify-content:center;align-items:center;width:100%;height:100%;font-size:4rem;display:flex}.match-badge{color:#fff;background:linear-gradient(135deg,#10b981,#059669);border:1px solid #fff3;border-radius:1.5rem;align-items:center;gap:.25rem;padding:.375rem .75rem;font-size:.875rem;font-weight:700;display:flex;position:absolute;top:.75rem;right:.75rem;box-shadow:0 4px 12px #10b98166}.match-icon{font-size:.75rem}.match-count{font-size:1rem}.potion-content{padding:1.25rem}.potion-name{color:var(--color-potion-glow);text-shadow:0 0 10px #8b5cf680;margin:0 0 .75rem;font-size:1.25rem;font-weight:700;line-height:1.3}.potion-meta{flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem;display:flex}.meta-tag{color:var(--color-mystical-accent);text-transform:capitalize;background:#8b5cf633;border:1px solid #8b5cf666;border-radius:.375rem;padding:.25rem .625rem;font-size:.75rem}.meta-tag.difficulty{background:#f59e0b33;border-color:#f59e0b66}.potion-time{color:#ffffffb3;gap:1rem;margin-bottom:.75rem;font-size:.875rem;display:flex}.potion-preview{border-top:1px solid #8b5cf633;margin-top:1rem;padding-top:1rem}.preview-label{color:var(--color-mystical-accent);text-transform:uppercase;letter-spacing:.05em;margin:0 0 .5rem;font-size:.75rem;font-weight:600}.preview-steps{color:#fffc;margin:0;padding-left:1.25rem;font-size:.875rem;line-height:1.5}.preview-steps li{margin-bottom:.375rem}.preview-more{color:var(--color-potion-glow);margin:.5rem 0 0;font-size:.75rem;font-style:italic}.potion-glow{opacity:0;pointer-events:none;z-index:0;background:radial-gradient(circle,#8b5cf64d 0%,#0000 70%);width:100%;height:100%;transition:opacity .3s,transform .3s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes potionReveal{0%{opacity:0;transform:translateY(20px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@media (max-width:768px){.potion-image-container{height:160px}.potion-name{font-size:1.125rem}.potion-content{padding:1rem}}.potion-skeleton{animation:.3s ease-out fadeIn;position:relative;overflow:hidden}.skeleton-bottle{flex-direction:column;align-items:center;display:flex;position:relative}.skeleton-bottle-top{background:linear-gradient(90deg,#8b5cf61a 0%,#8b5cf633 50%,#8b5cf61a 100%) 0 0/200% 100%;border-radius:.25rem .25rem 0 0;width:40%;height:1rem;animation:1.5s infinite shimmer}.skeleton-bottle-body{background:#1a0f2e99;border:2px solid #8b5cf633;border-radius:1rem;width:100%;overflow:hidden}.skeleton-image{background:linear-gradient(90deg,#8b5cf61a 0%,#8b5cf633 50%,#8b5cf61a 100%) 0 0/200% 100%;width:100%;height:200px;animation:1.5s infinite shimmer}.skeleton-content{padding:1.25rem}.skeleton-title{background:linear-gradient(90deg,#8b5cf626 0%,#8b5cf640 50%,#8b5cf626 100%) 0 0/200% 100%;border-radius:.375rem;width:80%;height:1.5rem;margin-bottom:.75rem;animation:1.5s infinite shimmer}.skeleton-meta{gap:.5rem;margin-bottom:.75rem;display:flex}.skeleton-tag{background:linear-gradient(90deg,#8b5cf61a 0%,#8b5cf633 50%,#8b5cf61a 100%) 0 0/200% 100%;border-radius:.375rem;width:4rem;height:1.5rem;animation:1.5s infinite shimmer}.skeleton-time{gap:1rem;margin-bottom:.75rem;display:flex}.skeleton-time-item{background:linear-gradient(90deg,#8b5cf61a 0%,#8b5cf633 50%,#8b5cf61a 100%) 0 0/200% 100%;border-radius:.25rem;width:5rem;height:1rem;animation:1.5s infinite shimmer}.skeleton-preview{border-top:1px solid #8b5cf633;margin-top:1rem;padding-top:1rem}.skeleton-preview-label{background:linear-gradient(90deg,#8b5cf61a 0%,#8b5cf633 50%,#8b5cf61a 100%) 0 0/200% 100%;border-radius:.25rem;width:6rem;height:.875rem;margin-bottom:.5rem;animation:1.5s infinite shimmer}.skeleton-preview-lines{flex-direction:column;gap:.5rem;display:flex}.skeleton-line{background:linear-gradient(90deg,#8b5cf61a 0%,#8b5cf633 50%,#8b5cf61a 100%) 0 0/200% 100%;border-radius:.25rem;height:.875rem;animation:1.5s infinite shimmer}.skeleton-line:first-child{width:100%}.skeleton-line:nth-child(2){width:90%}.skeleton-line:nth-child(3){width:70%}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.potion-skeleton:first-child{animation-delay:0s}.potion-skeleton:nth-child(2){animation-delay:.1s}.potion-skeleton:nth-child(3){animation-delay:.2s}.potion-skeleton:nth-child(4){animation-delay:.3s}.potion-skeleton:nth-child(5){animation-delay:.4s}@media (max-width:768px){.skeleton-image{height:160px}}@media (prefers-reduced-motion:reduce){.skeleton-bottle-top,.skeleton-image,.skeleton-title,.skeleton-tag,.skeleton-time-item,.skeleton-preview-label,.skeleton-line{background:#8b5cf626;animation:none}}.ingredient-match{background:#1a0f2e99;border:1px solid #8b5cf64d;border-radius:.75rem;margin:1rem 0;padding:1.25rem}.ingredient-match-header{margin-bottom:1.25rem}.match-title{color:var(--color-potion-glow);text-shadow:0 0 8px #8b5cf666;margin:0 0 .5rem;font-size:1.125rem;font-weight:700}.match-summary{align-items:center;gap:.5rem;display:flex}.match-count-display{color:var(--color-mystical-accent);background:#f59e0b33;border:1px solid #f59e0b66;border-radius:.375rem;padding:.25rem .75rem;font-size:.875rem;font-weight:600}.ingredient-section{margin-bottom:1.25rem}.ingredient-section:last-child{margin-bottom:0}.section-title-row{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.75rem;display:flex}.section-title{text-transform:uppercase;letter-spacing:.05em;align-items:center;gap:.5rem;margin:0;font-size:.875rem;font-weight:600;display:flex}.add-all-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border:1px solid #8b5cf680;border-radius:.5rem;flex-shrink:0;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:600;transition:all .2s;display:flex}.add-all-btn:hover{background:linear-gradient(135deg,#7c3aed,#6d28d9);transform:translateY(-2px);box-shadow:0 0 15px #8b5cf699}.add-all-btn:active{transform:translateY(0)}.add-all-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.matched-section .section-title{color:var(--color-ingredient-match)}.missing-section .section-title{color:var(--color-ingredient-missing)}.section-icon{font-size:1rem;font-weight:700}.ingredient-list{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.ingredient-item{border-radius:.5rem;align-items:center;gap:.75rem;padding:.625rem .875rem;transition:background-color .2s,transform .2s;display:flex}.ingredient-item.matched{background:#10b9811a;border:1px solid #10b9814d}.ingredient-item.missing{background:#ef44441a;border:1px solid #ef44444d}.ingredient-item:hover{transform:translate(4px)}.ingredient-item.matched:hover{background:#10b98126}.ingredient-item.missing:hover{background:#ef444426}.ingredient-icon{flex-shrink:0;font-size:.875rem;font-weight:700}.ingredient-item.matched .ingredient-icon{color:var(--color-ingredient-match)}.ingredient-item.missing .ingredient-icon{color:var(--color-ingredient-missing)}.ingredient-name{color:#ffffffe6;text-transform:capitalize;flex:1;font-size:.9375rem}.ingredient-quantity{color:#fff9;font-size:.8125rem;font-style:italic}.ingredient-actions{flex-shrink:0;align-items:center;gap:.5rem;display:flex}.i-have-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#10b981,#059669);border:1px solid #10b98180;border-radius:.375rem;flex-shrink:0;align-items:center;gap:.375rem;padding:.375rem .75rem;font-size:.8125rem;font-weight:600;transition:all .2s;display:flex}.i-have-btn:hover{background:linear-gradient(135deg,#059669,#047857);transform:scale(1.05);box-shadow:0 0 12px #10b98199}.i-have-btn:active{transform:scale(.98)}.i-have-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.add-to-list-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border:1px solid #8b5cf680;border-radius:.375rem;flex-shrink:0;align-items:center;gap:.375rem;padding:.375rem .75rem;font-size:.8125rem;font-weight:600;transition:all .2s;display:flex}.add-to-list-btn:hover{background:linear-gradient(135deg,#7c3aed,#6d28d9);transform:scale(1.05);box-shadow:0 0 12px #8b5cf699}.add-to-list-btn:active{transform:scale(.98)}.add-to-list-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-text{font-size:.8125rem}@media (max-width:768px){.ingredient-match{padding:1rem}.section-title-row{flex-direction:column;align-items:flex-start;gap:.75rem}.add-all-btn{justify-content:center;width:100%}.ingredient-item{padding:.5rem .75rem}.ingredient-actions{gap:.375rem}.i-have-btn,.add-to-list-btn{padding:.25rem .5rem}.btn-text{display:none}.btn-icon{font-size:1rem}}.recipe-modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#000000d9;justify-content:center;align-items:center;padding:1rem;animation:.3s ease-out fadeIn;display:flex;position:fixed;inset:0}.recipe-modal{background:linear-gradient(135deg,#1a0f2efa 0%,#2a1942fa 100%);border:2px solid #8b5cf680;border-radius:1.25rem;width:100%;max-width:800px;max-height:90vh;animation:.4s ease-out modalSlideIn;position:relative;overflow-y:auto;box-shadow:0 20px 60px #8b5cf64d,inset 0 1px #ffffff1a}.modal-close-btn{float:right;color:#fff;cursor:pointer;z-index:10;background:#ef4444e6;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;font-size:1.25rem;font-weight:700;transition:all .2s;display:flex;position:sticky;top:1rem;right:1rem;box-shadow:0 4px 12px #ef444466}.modal-close-btn:hover{background:#dc2626;transform:scale(1.1)rotate(90deg);box-shadow:0 6px 16px #ef444499}.modal-content{padding:0}.modal-header{border-radius:1.25rem 1.25rem 0 0;width:100%;height:300px;position:relative;overflow:hidden}.modal-image{object-fit:cover;width:100%;height:100%}.modal-image-placeholder{background:linear-gradient(135deg,#1a0f2e,#2a1942);justify-content:center;align-items:center;width:100%;height:100%;font-size:6rem;display:flex}.modal-header-overlay{background:linear-gradient(#0000 0%,#1a0f2eb3 50%,#1a0f2ef2 100%);padding:2rem;position:absolute;bottom:0;left:0;right:0}.modal-title{color:#fff;text-shadow:0 2px 8px #000c;margin:0 0 .5rem;font-size:2rem;font-weight:700;line-height:1.2}.modal-description{color:#ffffffe6;text-shadow:0 1px 4px #000c;margin:0;font-size:1rem}.modal-meta{border-bottom:1px solid #8b5cf633;flex-direction:column;gap:.75rem;padding:1.5rem 2rem;display:flex}.meta-row{flex-wrap:wrap;gap:1rem;display:flex}.meta-item{color:#ffffffe6;text-transform:capitalize;background:#8b5cf626;border:1px solid #8b5cf64d;border-radius:.5rem;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.9375rem;display:flex}.meta-icon{font-size:1.125rem}.modal-actions{border-bottom:1px solid #8b5cf633;flex-wrap:wrap;align-items:center;gap:1rem;padding:1.5rem 2rem;display:flex}.action-btn{cursor:pointer;border:1px solid;border-radius:.625rem;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;transition:all .2s;display:flex}.favorite-btn{color:#fff;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-color:#8b5cf680}.favorite-btn:hover{background:linear-gradient(135deg,#7c3aed,#6d28d9);transform:translateY(-2px);box-shadow:0 0 16px #8b5cf699}.favorite-btn.is-favorite{background:linear-gradient(135deg,#ef4444,#dc2626);border-color:#ef444480}.favorite-btn.is-favorite:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 0 16px #ef444499}.share-btn{color:var(--color-mystical-accent);background:#f59e0b33;border-color:#f59e0b80}.share-btn:hover{background:#f59e0b4d;transform:translateY(-2px);box-shadow:0 0 16px #f59e0b66}.copied-message{color:var(--color-ingredient-match);background:#10b98133;border:1px solid #10b98166;border-radius:.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:600;animation:.3s ease-out fadeIn}.auth-prompt{background:#8b5cf626;border:1px solid #8b5cf64d;border-radius:.5rem;align-items:center;gap:.75rem;width:100%;margin-top:.5rem;padding:1rem 1.5rem;display:flex}.auth-prompt-icon{flex-shrink:0;font-size:1.5rem}.auth-prompt-text{color:#fffc;font-size:.9375rem;line-height:1.5}.auth-link{color:var(--color-potion-glow);font-weight:600;text-decoration:none;transition:color .2s}.auth-link:hover{color:var(--color-accent-hover);text-decoration:underline}.modal-section{border-bottom:1px solid #8b5cf633;padding:1.5rem 2rem}.modal-section:last-child{border-bottom:none}.section-heading{color:var(--color-potion-glow);text-shadow:0 0 8px #8b5cf666;align-items:center;gap:.75rem;margin:0 0 1.25rem;font-size:1.375rem;font-weight:700;display:flex}.heading-icon{font-size:1.5rem}.ingredients-full-list{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.ingredient-full-item{background:#8b5cf61a;border:1px solid #8b5cf633;border-radius:.5rem;align-items:center;gap:.75rem;padding:.75rem;transition:background-color .2s;display:flex}.ingredient-full-item:hover{background:#8b5cf626}.ingredient-info{flex:1;align-items:center;gap:.75rem;min-width:0;display:flex}.ingredient-bullet{color:var(--color-potion-glow);flex-shrink:0;font-size:1.25rem;font-weight:700}.ingredient-full-name{color:#ffffffe6;text-transform:capitalize;white-space:nowrap;flex-shrink:0;font-size:.9375rem}.ingredient-full-quantity{color:#fff9;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-size:.875rem;font-weight:600;overflow:hidden}.ingredient-add-btn{color:var(--color-potion-glow);cursor:pointer;background:#8b5cf633;border:1px solid #8b5cf666;border-radius:.375rem;flex-shrink:0;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;padding:.5rem;font-size:1rem;transition:all .2s;display:flex}.ingredient-add-btn:hover:not(:disabled){background:#8b5cf64d;border-color:#8b5cf699;transform:translateY(-2px);box-shadow:0 4px 12px #8b5cf64d}.ingredient-add-btn:disabled{opacity:.5;cursor:not-allowed}.instructions-list{flex-direction:column;gap:1rem;margin:0;padding:0;list-style:none;display:flex}.instruction-step{background:#8b5cf61a;border:1px solid #8b5cf633;border-radius:.625rem;gap:1rem;padding:1rem;transition:all .2s;display:flex}.instruction-step:hover{background:#8b5cf626;transform:translate(4px)}.step-number{color:#fff;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:2rem;height:2rem;font-size:1rem;font-weight:700;display:flex;box-shadow:0 2px 8px #8b5cf666}.step-text{color:#ffffffe6;flex:1;font-size:1rem;line-height:1.6}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.shopping-list-message-banner{text-align:center;border-radius:.5rem;margin:1rem 2rem;padding:1rem 1.5rem;font-size:.9375rem;font-weight:600;animation:.3s ease-out slideDown}.shopping-list-message-banner.success{color:#10b981;background:#10b98133;border:1px solid #10b98180}.shopping-list-message-banner.error{color:#ef4444;background:#ef444433;border:1px solid #ef444480}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.recipe-modal{border-radius:1rem;max-height:95vh}.modal-header{height:200px}.modal-title{font-size:1.5rem}.modal-meta,.modal-actions,.modal-section{padding:1rem 1.25rem}.ingredients-full-list{grid-template-columns:1fr}.action-btn{flex:1;justify-content:center}.btn-text{font-size:.875rem}}.recipe-modal::-webkit-scrollbar{width:8px}.recipe-modal::-webkit-scrollbar-track{background:#1a0f2e80;border-radius:0 1.25rem 1.25rem 0}.recipe-modal::-webkit-scrollbar-thumb{background:#8b5cf680;border-radius:4px}.recipe-modal::-webkit-scrollbar-thumb:hover{background:#8b5cf6b3}.waste-savings-summary{max-width:1200px;margin:2rem auto;padding:0 1rem;animation:.6s ease-out fadeInUp;position:relative}.waste-savings-summary:before{content:"";background:linear-gradient(90deg,#0000,#8b5cf680,#0000);width:80%;height:2px;position:absolute;top:-10px;left:50%;transform:translate(-50%);box-shadow:0 0 10px #8b5cf680}.waste-savings-summary:after{content:"";background:linear-gradient(90deg,#0000,#8b5cf680,#0000);width:80%;height:2px;position:absolute;bottom:-10px;left:50%;transform:translate(-50%);box-shadow:0 0 10px #8b5cf680}.summary-header{text-align:center;margin-bottom:2rem}.summary-title{color:var(--color-text-primary);text-shadow:0 0 20px #8b5cf699;letter-spacing:.05em;justify-content:center;align-items:center;gap:.75rem;margin-bottom:.5rem;font-family:Cinzel,serif;font-size:2rem;font-weight:700;display:flex}.summary-title .title-icon{filter:drop-shadow(0 0 10px #8b5cf6cc);font-size:2.5rem;animation:2s ease-in-out infinite mysticalGlow}.summary-subtitle{color:var(--color-mystical-accent);opacity:.9;text-shadow:0 0 10px #f59e0b4d;font-size:1rem;font-style:italic}.summary-cards{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-bottom:2rem;display:grid}.summary-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#1a0f2ecc,#2d1b4e99);border:2px solid #8b5cf666;border-radius:1rem;align-items:center;gap:1.5rem;padding:1.5rem;transition:all .3s;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 15px #0000004d,inset 0 1px #8b5cf633}.summary-card:before{content:"";opacity:0;background:linear-gradient(135deg,#8b5cf633,#0000);transition:opacity .3s;position:absolute;inset:0}.summary-card:after{content:"";pointer-events:none;background:radial-gradient(circle,#8b5cf61a 0%,#0000 70%);width:200%;height:200%;animation:4s ease-in-out infinite mysticalPulse;position:absolute;top:-50%;left:-50%}.summary-card:hover{border-color:#8b5cf6b3;transform:translateY(-4px);box-shadow:0 8px 30px #8b5cf666,0 0 40px #8b5cf633}.summary-card:hover:before{opacity:1}.summary-card.highlight{background:linear-gradient(135deg,#f59e0b33,#d977061a);border-color:#f59e0b80;box-shadow:0 4px 15px #f59e0b4d,inset 0 1px #f59e0b4d}.summary-card.highlight:after{background:radial-gradient(circle,#f59e0b26 0%,#0000 70%)}.summary-card.highlight:hover{border-color:#f59e0bcc;box-shadow:0 8px 30px #f59e0b80,0 0 40px #f59e0b4d}.card-icon{filter:drop-shadow(0 0 8px #8b5cf699);flex-shrink:0;font-size:3rem;animation:3s ease-in-out infinite float}.summary-card.highlight .card-icon{filter:drop-shadow(0 0 10px #f59e0bcc)}.card-content{flex:1}.card-value{color:var(--color-text-primary);margin-bottom:.25rem;font-size:2rem;font-weight:700;line-height:1}.card-label{color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:.875rem;font-weight:600}.summary-details{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#1a0f2ecc,#2d1b4e99);border:2px solid #8b5cf64d;border-radius:1rem;flex-direction:column;gap:1rem;padding:1.5rem;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 15px #0000004d,inset 0 1px #8b5cf633}.summary-details:before{content:"";pointer-events:none;background:radial-gradient(circle,#8b5cf60d 0%,#0000 70%);position:absolute;inset:0}.detail-item{align-items:flex-start;gap:1rem;display:flex}.detail-icon{filter:drop-shadow(0 0 6px #f59e0b99);flex-shrink:0;margin-top:.125rem;font-size:1.5rem;animation:3s ease-in-out infinite subtleGlow}.detail-text{color:var(--color-text-primary);flex:1;margin:0;font-size:1rem;line-height:1.6}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes mysticalGlow{0%,to{filter:drop-shadow(0 0 10px #8b5cf6cc);transform:scale(1)rotate(0)}50%{filter:drop-shadow(0 0 20px #8b5cf6);transform:scale(1.15)rotate(5deg)}}@keyframes mysticalPulse{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.1)}}@keyframes subtleGlow{0%,to{filter:drop-shadow(0 0 6px #f59e0b99)}50%{filter:drop-shadow(0 0 12px #f59e0be6)}}@media (max-width:768px){.summary-title{font-size:1.5rem}.summary-title .title-icon{font-size:2rem}.summary-cards{grid-template-columns:1fr;gap:1rem}.summary-card{padding:1.25rem}.card-icon{font-size:2.5rem}.card-value{font-size:1.75rem}.summary-details{padding:1.25rem}}.potion-grid-container{width:100%;padding:2rem 0}.potion-grid-header{text-align:center;margin-bottom:2.5rem;animation:.6s ease-out fadeInDown}.grid-title{color:var(--color-potion-glow);text-shadow:0 0 20px #8b5cf699;justify-content:center;align-items:center;gap:1rem;margin:0 0 .75rem;font-size:2.5rem;font-weight:700;display:flex}.grid-subtitle{color:var(--color-mystical-accent);margin:0;font-size:1.125rem;font-weight:500}.potion-grid{grid-template-columns:repeat(5,1fr);gap:2rem;margin-bottom:2rem;display:grid}.potion-grid-item{animation:.6s ease-out backwards staggeredReveal;display:flex}.potion-grid-empty{justify-content:center;align-items:center;min-height:400px;padding:3rem 1rem;display:flex}.empty-cauldron{text-align:center;max-width:500px;animation:.6s ease-out fadeIn}.cauldron-icon{filter:drop-shadow(0 0 20px #8b5cf699);margin-bottom:1.5rem;font-size:6rem;animation:3s ease-in-out infinite float}.empty-title{color:var(--color-potion-glow);text-shadow:0 0 15px #8b5cf680;margin:0 0 1rem;font-size:2rem;font-weight:700}.empty-message{color:#ffffffb3;margin:0 0 2rem;font-size:1.125rem;line-height:1.6}.brew-again-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border:2px solid #8b5cf680;border-radius:.75rem;align-items:center;gap:.75rem;padding:1rem 2rem;font-size:1.125rem;font-weight:700;transition:all .3s;display:inline-flex;box-shadow:0 8px 24px #8b5cf64d}.brew-again-btn:hover{background:linear-gradient(135deg,#7c3aed,#6d28d9);transform:translateY(-4px);box-shadow:0 12px 32px #8b5cf680}.brew-again-btn:active{transform:translateY(-2px)}.brew-again-btn.secondary{color:var(--color-potion-glow);background:#8b5cf633;border-color:#8b5cf666;box-shadow:0 4px 16px #8b5cf633}.brew-again-btn.secondary:hover{background:#8b5cf64d;box-shadow:0 6px 20px #8b5cf64d}.btn-icon{font-size:1.5rem}.grid-footer{border-top:1px solid #8b5cf633;justify-content:center;margin-top:3rem;padding-top:2rem;display:flex}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes staggeredReveal{0%{opacity:0;transform:translateY(30px)scale(.9)}to{opacity:1;transform:translateY(0)scale(1)}}@media (max-width:1400px){.potion-grid{grid-template-columns:repeat(4,1fr);gap:1.5rem}}@media (max-width:1200px){.potion-grid{grid-template-columns:repeat(3,1fr)}.grid-title,.title-icon{font-size:2rem}}@media (max-width:768px){.potion-grid-container{padding:1.5rem 0}.potion-grid{grid-template-columns:repeat(2,1fr);gap:1rem}.potion-grid-header{margin-bottom:1.5rem}.grid-title{flex-direction:column;gap:.5rem;font-size:1.75rem}.title-icon{font-size:2.5rem}.grid-subtitle{font-size:1rem}.empty-title{font-size:1.5rem}.empty-message{font-size:1rem}.cauldron-icon{font-size:4rem}.brew-again-btn{padding:.875rem 1.5rem;font-size:1rem}.btn-icon{font-size:1.25rem}}@media (max-width:480px){.potion-grid{grid-template-columns:1fr}.grid-title{font-size:1.5rem}}@media (prefers-reduced-motion:reduce){.potion-grid-item,.empty-cauldron,.potion-grid-header,.cauldron-icon,.title-icon{animation:none}.potion-card:hover,.brew-again-btn:hover{transform:none}}.toast{bottom:var(--spacing-xl);right:var(--spacing-xl);align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md)var(--spacing-lg);border:1px solid var(--color-border-medium);border-radius:var(--radius-lg);box-shadow:0 10px 40px #00000080,var(--glow-potion);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:var(--z-tooltip);background:#1a0f2ef2;min-width:280px;max-width:400px;animation:.3s ease-out toastSlideIn;display:flex;position:fixed}.toast-icon{border-radius:var(--radius-full);flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:1.125rem;font-weight:700;display:flex}.toast-message{color:var(--color-text-primary);flex:1;font-size:.9375rem;font-weight:500}.toast-success{border-color:var(--color-ingredient-match);box-shadow:0 10px 40px #00000080,var(--glow-ingredient-match)}.toast-success .toast-icon{color:var(--color-ingredient-match);background:#10b98133}.toast-error{border-color:var(--color-ingredient-missing);box-shadow:0 10px 40px #00000080,var(--glow-ingredient-missing)}.toast-error .toast-icon{color:var(--color-ingredient-missing);background:#ef444433}.toast-warning{border-color:var(--color-mystical-accent);box-shadow:0 10px 40px #00000080,var(--glow-mystical)}.toast-warning .toast-icon{color:var(--color-mystical-accent);background:#f59e0b33}.toast-info{border-color:var(--color-potion-glow);box-shadow:0 10px 40px #00000080,var(--glow-potion)}.toast-info .toast-icon{color:var(--color-potion-glow);background:#8b5cf633}@keyframes toastSlideIn{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}@media (max-width:768px){.toast{bottom:var(--spacing-lg);right:var(--spacing-md);left:var(--spacing-md);min-width:auto;max-width:none}}@media (prefers-reduced-motion:reduce){.toast{animation:none}}.favorites-page{max-width:1400px;min-height:100vh;margin:0 auto;padding:2rem 1rem}.favorites-header{text-align:center;margin-bottom:2rem}.favorites-title{color:var(--color-potion-glow);text-shadow:0 0 20px #8b5cf680;justify-content:center;align-items:center;gap:.75rem;margin-bottom:.5rem;font-size:2.5rem;display:flex}.title-icon{font-size:2.5rem;animation:2s ease-in-out infinite heartbeat}@keyframes heartbeat{0%,to{transform:scale(1)}10%,30%{transform:scale(1.1)}20%,40%{transform:scale(1)}}.favorites-subtitle{color:var(--color-mystical-accent);opacity:.9;font-size:1.1rem}.favorites-loading{flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;padding:4rem 2rem;display:flex}.loading-spinner{border:4px solid #8b5cf633;border-top-color:var(--color-potion-glow);border-radius:50%;width:60px;height:60px;animation:1s linear infinite spin}.favorites-loading p{color:var(--color-text-secondary);font-size:1.1rem}.favorites-error{text-align:center;background:#ef44441a;border:1px solid #ef44444d;border-radius:.5rem;flex-direction:column;align-items:center;gap:1rem;margin:2rem 0;padding:2rem;display:flex}.error-icon{font-size:2.5rem}.favorites-error p{color:#ef4444e6;margin:0;font-size:1rem}.retry-btn{background:var(--color-accent);color:#fff;cursor:pointer;border:none;border-radius:.5rem;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;transition:all .3s}.retry-btn:hover{background:var(--color-accent-hover);transform:translateY(-2px);box-shadow:0 4px 12px #8b5cf64d}.favorites-controls{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1a0f2e99;border:1px solid #8b5cf64d;border-radius:12px;flex-wrap:wrap;justify-content:center;gap:1.5rem;margin-bottom:2rem;padding:1.5rem;display:flex}.filter-group{align-items:center;gap:.5rem;display:flex}.filter-label{color:var(--color-potion-glow);align-items:center;gap:.5rem;font-size:.95rem;font-weight:500;display:flex}.filter-icon{font-size:1.2rem}.filter-select{color:#fff;cursor:pointer;background:#1a0f2ecc;border:1px solid #8b5cf666;border-radius:8px;min-width:150px;padding:.5rem 1rem;font-size:.95rem;transition:all .3s}.filter-select:hover{border-color:var(--color-potion-glow);box-shadow:0 0 10px #8b5cf64d}.filter-select:focus{border-color:var(--color-potion-glow);outline:none;box-shadow:0 0 15px #8b5cf666}.filter-select option{background:var(--color-cauldron-dark);color:#fff}.favorites-empty{text-align:center;max-width:600px;margin:0 auto;padding:4rem 2rem}.empty-cauldron{margin-bottom:2rem;animation:3s ease-in-out infinite float}.empty-title{color:var(--color-potion-glow);text-shadow:0 0 15px #8b5cf666;margin-bottom:1rem;font-size:2rem}.empty-message{color:#ffffffb3;margin-bottom:2rem;font-size:1.1rem;line-height:1.6}.empty-cta{background:linear-gradient(135deg,var(--color-potion-glow),var(--color-mystical-accent));color:#fff;border-radius:12px;align-items:center;gap:.5rem;padding:1rem 2rem;font-size:1.1rem;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex;box-shadow:0 4px 15px #8b5cf666}.empty-cta:hover{transform:translateY(-2px);box-shadow:0 6px 20px #8b5cf699}.cta-icon{font-size:1.3rem}.favorites-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem;margin-top:2rem;display:grid}.favorite-item{animation:.5s ease-out fadeInUp;position:relative}.favorite-item:first-child{animation-delay:50ms}.favorite-item:nth-child(2){animation-delay:.1s}.favorite-item:nth-child(3){animation-delay:.15s}.favorite-item:nth-child(4){animation-delay:.2s}.favorite-item:nth-child(5){animation-delay:.25s}.remove-favorite-btn{color:#fff;cursor:pointer;z-index:10;opacity:0;background:#ef4444e6;border:1px solid #ef444480;border-radius:8px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.9rem;font-weight:600;transition:all .3s;display:flex;position:absolute;top:1rem;right:1rem;transform:translateY(-10px)}.favorite-item:hover .remove-favorite-btn{opacity:1;transform:translateY(0)}.remove-favorite-btn:hover{background:#ef4444;transform:scale(1.05);box-shadow:0 4px 15px #ef444480}.remove-favorite-btn:active{transform:scale(.95)}.remove-icon{font-size:1.2rem}.remove-text{font-size:.85rem}.toast-container{z-index:1000;animation:.3s ease-out slideInRight;position:fixed;top:2rem;right:2rem}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@media (max-width:768px){.favorites-page{padding:1rem .5rem}.favorites-title,.title-icon{font-size:2rem}.favorites-controls{flex-direction:column;gap:1rem;padding:1rem}.filter-group{flex-direction:column;align-items:flex-start;width:100%}.filter-select{width:100%}.favorites-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem}.remove-favorite-btn{opacity:1;transform:translateY(0)}.toast-container{top:1rem;left:1rem;right:1rem}}@media (max-width:480px){.favorites-grid{grid-template-columns:1fr}.empty-icon{font-size:4rem}.empty-title{font-size:1.5rem}}.history-page{background:linear-gradient(135deg,#1a0b2e 0%,#2d1b4e 100%);min-height:100vh;padding:2rem 1rem}.history-header{text-align:center;margin-bottom:2rem;animation:.6s ease-out fadeInDown}.history-title{color:#f0e6ff;text-shadow:0 0 20px #8a2be280;margin-bottom:.5rem;font-size:2.5rem}.title-icon{margin-right:.5rem;font-size:2.5rem;display:inline-block}.history-subtitle{color:#b8a3d6;font-size:1.1rem;font-style:italic}.history-controls{flex-wrap:wrap;align-items:center;gap:1rem;max-width:1200px;margin:0 auto 2rem;display:flex}.search-box{background:#ffffff0d;border:1px solid #8a2be24d;border-radius:12px;flex:1;align-items:center;min-width:250px;padding:.75rem 1rem;display:flex;position:relative}.search-icon{opacity:.7;margin-right:.75rem;font-size:1.2rem}.search-input{color:#f0e6ff;background:0 0;border:none;outline:none;flex:1;font-size:1rem}.search-input::placeholder{color:#b8a3d6;opacity:.6}.clear-search{color:#b8a3d6;cursor:pointer;background:0 0;border:none;margin-left:.5rem;padding:.25rem;font-size:1.2rem}.sort-box{background:#ffffff0d;border:1px solid #8a2be24d;border-radius:12px;align-items:center;gap:.75rem;padding:.75rem 1rem;display:flex}.sort-label{color:#b8a3d6;white-space:nowrap;align-items:center;gap:.5rem;font-size:.95rem;display:flex}.sort-select{color:#f0e6ff;cursor:pointer;background:#8a2be233;border:1px solid #8a2be24d;border-radius:8px;padding:.5rem .75rem;font-size:.95rem}.history-loading,.history-error{color:#b8a3d6;text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:60vh;display:flex}.loading-icon{font-size:4rem;display:inline-block}.error-icon{color:#ff6b6b;margin-bottom:1rem;font-size:4rem}.history-empty{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:60vh;display:flex}.empty-icon{opacity:.6;font-size:6rem;display:inline-block}.empty-title{color:#f0e6ff;margin-bottom:1rem;font-size:2rem}.empty-message{color:#b8a3d6;max-width:500px;margin-bottom:2rem;font-size:1.1rem}.empty-cta{color:#fff;cursor:pointer;background:linear-gradient(135deg,#8a2be2 0%,#9d4edd 100%);border:none;border-radius:12px;align-items:center;gap:.5rem;padding:1rem 2rem;font-size:1.1rem;font-weight:600;text-decoration:none;display:inline-flex;box-shadow:0 4px 15px #8a2be24d}.history-recipes{max-width:1200px;margin:0 auto}.recipes-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;display:grid}.recipe-item{flex-direction:column;gap:.75rem;display:flex}.recipe-meta{color:#b8a3d6;flex-direction:column;gap:.5rem;min-height:3.5rem;padding:0 .5rem;font-size:.85rem;display:flex}.recipe-date{white-space:nowrap;align-items:center;gap:.25rem;display:flex}.recipe-ingredients{-webkit-line-clamp:2;line-clamp:2;text-overflow:ellipsis;-webkit-box-orient:vertical;line-height:1.4;display:-webkit-box;overflow:hidden}.toast-container{z-index:1000;position:fixed;top:2rem;right:2rem}@media (max-width:768px){.history-controls{flex-direction:column;align-items:stretch}.recipes-grid{grid-template-columns:1fr}}.shopping-item{padding:var(--spacing-md);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);transition:all var(--transition-normal);margin-bottom:var(--spacing-sm);background:#1a0f2e66;justify-content:space-between;align-items:center;display:flex}.shopping-item:hover{border-color:var(--color-border-medium);background:#1a0f2e99;transform:translate(4px)}.shopping-item.purchased{opacity:.6;background:#10b9811a;border-color:#10b9814d}.shopping-item.purchased .item-name{color:var(--color-text-muted);text-decoration:line-through}.shopping-item-content{align-items:center;gap:var(--spacing-md);flex:1;display:flex}.checkbox-container{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;display:flex;position:relative}.mystical-checkbox{opacity:0;cursor:pointer;width:0;height:0;position:absolute}.checkbox-custom{border:2px solid var(--color-potion-glow);border-radius:var(--radius-sm);width:24px;height:24px;transition:all var(--transition-normal);background:#0f0a1ecc;display:block;position:relative}.checkbox-custom:after{content:"";border:solid var(--color-ingredient-match);border-width:0 2px 2px 0;width:6px;height:12px;display:none;position:absolute;top:3px;left:7px;transform:rotate(45deg)}.mystical-checkbox:checked~.checkbox-custom{border-color:var(--color-ingredient-match);background:#10b98133;box-shadow:0 0 10px #10b98166}.mystical-checkbox:checked~.checkbox-custom:after{display:block}.checkbox-container:hover .checkbox-custom{border-color:var(--color-potion-glow);box-shadow:0 0 10px #8b5cf64d}.mystical-checkbox:focus-visible~.checkbox-custom{outline:2px solid var(--color-potion-glow);outline-offset:2px}.item-details{gap:var(--spacing-xs);flex-direction:column;flex:1;display:flex}.item-name{color:var(--color-text-primary);transition:all var(--transition-normal);font-size:1rem;font-weight:500}.item-quantity{color:var(--color-text-muted);font-size:.875rem;font-style:italic}.remove-btn{border-radius:var(--radius-md);cursor:pointer;width:36px;height:36px;transition:all var(--transition-normal);background:#ef44441a;border:1px solid #ef44444d;justify-content:center;align-items:center;padding:0;display:flex}.remove-btn:hover{border-color:var(--color-ingredient-missing);background:#ef444433;transform:scale(1.1);box-shadow:0 0 10px #ef444466}.remove-btn:active{transform:scale(.95)}.remove-icon{filter:grayscale(.3);font-size:1.25rem}@media (max-width:768px){.shopping-item{padding:var(--spacing-sm)}.item-name{font-size:.9375rem}.remove-btn{width:32px;height:32px}}.shopping-list-container{width:100%;max-width:800px;padding:var(--spacing-xl)var(--spacing-lg);margin:0 auto}.shopping-list-header{margin-bottom:var(--spacing-xl);justify-content:space-between;align-items:center;gap:var(--spacing-md);flex-wrap:wrap;display:flex}.header-content{flex:1;min-width:250px}.shopping-list-title{margin-bottom:var(--spacing-sm);background:linear-gradient(135deg,var(--color-potion-glow)0%,var(--color-mystical-accent)100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:2.5rem}.shopping-list-stats{align-items:center;gap:var(--spacing-md);flex-wrap:wrap;display:flex}.stat-badge{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs)var(--spacing-md);border:1px solid var(--color-potion-glow);border-radius:var(--radius-full);color:var(--color-potion-glow);background:#8b5cf61a;font-size:.875rem;font-weight:600;display:inline-flex}.stat-badge.purchased{border-color:var(--color-ingredient-match);color:var(--color-ingredient-match);background:#10b9811a}.stat-icon{font-size:1rem}.stat-text{white-space:nowrap}.clear-purchased-btn{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm)var(--spacing-lg);white-space:nowrap;display:flex}.clear-purchased-btn .btn-icon{font-size:1.125rem}.empty-state{padding:var(--spacing-2xl)var(--spacing-lg);text-align:center;border:2px dashed var(--color-border-subtle);border-radius:var(--radius-xl);background:#1a0f2e66;flex-direction:column;justify-content:center;align-items:center;min-height:400px;display:flex}.empty-icon{margin-bottom:var(--spacing-lg);opacity:.5;filter:grayscale(.3);font-size:5rem}.empty-title{margin-bottom:var(--spacing-md);color:var(--color-text-primary);font-size:1.75rem}.empty-description{color:var(--color-text-muted);max-width:500px;font-size:1.125rem;line-height:1.6}.shopping-list-content{gap:var(--spacing-xl);flex-direction:column;display:flex}.shopping-section{border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--spacing-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1a0f2e4d}.shopping-section.purchased-section{background:#10b9810d;border-color:#10b98133}.section-title{align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg);color:var(--color-text-primary);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--color-border-subtle);font-size:1.25rem;display:flex}.shopping-items-list{margin:0;padding:0;list-style:none}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.shopping-item{animation:.3s ease-out slideIn}@media (max-width:768px){.shopping-list-container{padding:var(--spacing-lg)var(--spacing-md)}.shopping-list-title{font-size:2rem}.shopping-list-header{flex-direction:column;align-items:flex-start}.clear-purchased-btn{justify-content:center;width:100%}.shopping-section{padding:var(--spacing-md)}.empty-state{padding:var(--spacing-xl)var(--spacing-md);min-height:300px}.empty-icon{font-size:4rem}.empty-title{font-size:1.5rem}.empty-description{font-size:1rem}}@media (prefers-reduced-motion:reduce){.shopping-item{animation:none}}.preferences-container{min-height:100vh;padding:var(--spacing-2xl)var(--spacing-lg);justify-content:center;align-items:flex-start;display:flex}.preferences-card{border:2px solid var(--color-border-subtle);border-radius:var(--radius-xl);width:100%;max-width:800px;padding:var(--spacing-2xl);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#1a0f2ecc;box-shadow:0 0 40px #8b5cf633,0 20px 60px #00000080}.preferences-header{text-align:center;margin-bottom:var(--spacing-2xl)}.preferences-title{color:var(--color-text-primary);margin-bottom:var(--spacing-sm);text-shadow:0 0 20px #8b5cf699;letter-spacing:.05em;font-family:Cinzel,serif;font-size:2.5rem}.preferences-subtitle{color:var(--color-text-secondary);margin:0;font-size:1.125rem}.preferences-form{gap:var(--spacing-2xl);flex-direction:column;display:flex}.save-message{padding:var(--spacing-md);border-radius:var(--radius-md);align-items:center;gap:var(--spacing-sm);font-size:.875rem;font-weight:600;animation:.3s ease-out slideIn;display:flex}.save-success{border:1px solid var(--color-ingredient-match);color:var(--color-ingredient-match);background:#10b9811a}.save-error{border:1px solid var(--color-ingredient-missing);color:var(--color-ingredient-missing);background:#ef44441a}.save-icon{font-size:1.25rem}.form-section{gap:var(--spacing-md);flex-direction:column;display:flex}.section-title{color:var(--color-text-primary);align-items:center;gap:var(--spacing-sm);margin:0;font-family:Cinzel,serif;font-size:1.25rem;display:flex}.section-icon{font-size:1.5rem}.section-description{color:var(--color-text-secondary);margin:0;font-size:.875rem}.checkbox-grid{gap:var(--spacing-md);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));display:grid}.checkbox-card{justify-content:center;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-lg);border:2px solid var(--color-border-subtle);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal);background:#0f0a1e99;flex-direction:column;min-height:120px;display:flex;position:relative}.checkbox-input{opacity:0;cursor:pointer;position:absolute}.checkbox-icon{transition:transform var(--transition-normal);font-size:2.5rem}.checkbox-label{color:var(--color-text-primary);text-align:center;font-size:1rem;font-weight:600}.checkbox-checkmark{top:var(--spacing-sm);right:var(--spacing-sm);border:2px solid var(--color-potion-glow);width:24px;height:24px;color:var(--color-potion-glow);opacity:0;transition:all var(--transition-normal);background:#8b5cf633;border-radius:50%;justify-content:center;align-items:center;font-size:.875rem;display:flex;position:absolute;transform:scale(.8)}.checkbox-card:hover{border-color:var(--color-border-glow);transform:translateY(-2px);box-shadow:0 4px 15px #8b5cf633}.checkbox-card:hover .checkbox-icon{transform:scale(1.1)}.checkbox-card-selected{border-color:var(--color-potion-glow);background:#8b5cf626;box-shadow:0 0 20px #8b5cf64d,inset 0 0 20px #8b5cf61a}.checkbox-card-selected .checkbox-checkmark{opacity:1;background:var(--color-potion-glow);color:#fff;transform:scale(1)}.checkbox-card-selected .checkbox-icon{transform:scale(1.15)}.ingredients-input{width:100%;padding:var(--spacing-md);border:2px solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text-primary);resize:vertical;transition:all var(--transition-normal);background:#0f0a1e99;font-family:inherit;font-size:1rem;line-height:1.6}.mystical-textarea:focus{border-color:var(--color-potion-glow);background:#0f0a1ecc;outline:none;box-shadow:0 0 0 3px #8b5cf633,0 0 20px #8b5cf64d}.mystical-textarea::placeholder{color:var(--color-text-muted);font-style:italic}.input-hint{color:var(--color-text-muted);margin:calc(var(--spacing-sm)*-1)0 0 0;font-size:.75rem;font-style:italic}.radio-grid{gap:var(--spacing-md);flex-direction:column;display:flex}.radio-card{align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg);border:2px solid var(--color-border-subtle);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal);background:#0f0a1e99;display:flex;position:relative}.radio-input{opacity:0;cursor:pointer;position:absolute}.radio-icon{transition:transform var(--transition-normal);flex-shrink:0;font-size:2rem}.radio-content{gap:var(--spacing-xs);flex-direction:column;flex:1;display:flex}.radio-label{color:var(--color-text-primary);font-size:1.125rem;font-weight:700}.radio-description{color:var(--color-text-secondary);font-size:.875rem}.radio-checkmark{border:2px solid var(--color-border-medium);color:#0000;width:24px;height:24px;transition:all var(--transition-normal);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.75rem;display:flex}.radio-card:hover{border-color:var(--color-border-glow);transform:translate(4px);box-shadow:0 4px 15px #8b5cf633}.radio-card:hover .radio-icon{transform:scale(1.1)}.radio-card-selected{border-color:var(--color-potion-glow);background:#8b5cf626;box-shadow:0 0 20px #8b5cf64d,inset 0 0 20px #8b5cf61a}.radio-card-selected .radio-checkmark{background:var(--color-potion-glow);border-color:var(--color-potion-glow);color:#fff;box-shadow:0 0 10px #8b5cf680}.radio-card-selected .radio-icon{transform:scale(1.15)}.btn-save-preferences{width:100%;padding:var(--spacing-lg);letter-spacing:.05em;text-transform:uppercase;background:linear-gradient(135deg,var(--color-ingredient-match)0%,#059669 100%);color:#fff;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);justify-content:center;align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-md);border:none;font-family:Cinzel,serif;font-size:1.125rem;font-weight:700;display:flex;box-shadow:0 4px 15px #10b98166,inset 0 1px #fff3}.btn-save-preferences:hover{transform:translateY(-2px);box-shadow:0 6px 25px #10b98199,inset 0 1px #ffffff4d}.btn-save-preferences:active{transform:translateY(0)}.btn-save-preferences:disabled{opacity:.7;cursor:not-allowed;transform:none!important}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.8s linear infinite spin}@media (max-width:768px){.preferences-container{padding:var(--spacing-lg)var(--spacing-md)}.preferences-card{padding:var(--spacing-xl)}.preferences-title{font-size:2rem}.preferences-subtitle{font-size:1rem}.checkbox-grid{grid-template-columns:repeat(2,1fr)}.radio-card{text-align:center;flex-direction:column}.radio-checkmark{top:var(--spacing-sm);right:var(--spacing-sm);position:absolute}}@media (max-width:480px){.checkbox-grid{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.save-message,.spinner{animation:none!important}.checkbox-card,.radio-card,.btn-save-preferences{transition:none!important}}.recipe-detail-page{background:var(--color-bg-primary,#0a0a0a);min-height:100vh;padding:2rem}.loading-container,.error-container{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;min-height:60vh;display:flex}.loading-container p{color:var(--color-text-secondary,#a0a0a0);font-size:1.1rem}.error-container h2{color:var(--color-ingredient-missing,#ef4444);margin:0;font-size:1.5rem}.back-btn{background:var(--color-accent,#8b5cf6);color:#fff;cursor:pointer;border:none;border-radius:.5rem;padding:.75rem 1.5rem;font-size:1rem;transition:all .3s}.back-btn:hover{background:var(--color-accent-hover,#7c3aed);transform:translateY(-2px)}.cauldron-spinner{border:4px solid #8b5cf633;border-top-color:var(--color-accent,#8b5cf6);border-radius:50%;width:60px;height:60px;animation:1s linear infinite spin}.app{background:var(--color-cauldron-dark,#1a0f2e);min-height:100vh}.page-container{color:#e0d4f7;max-width:1200px;margin:0 auto;padding:2rem;animation:.4s ease-out pageEnter}@keyframes pageEnter{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.page-container h1{color:var(--color-potion-glow,#8b5cf6);text-shadow:0 0 20px #8b5cf680;margin-bottom:1.5rem}.page-container p{color:#c4b5e0;font-size:1.1rem}.loading-container{background:var(--color-cauldron-dark,#1a0f2e);color:#e0d4f7;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;display:flex}.mystical-spinner{font-size:4rem;animation:2s linear infinite spin}button,.btn,a{transition:all .2s}button:active,.btn:active{transform:scale(.98)}button:focus-visible,.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--color-potion-glow);outline-offset:2px}html{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.page-container{animation:none}}