.landing-page{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh;padding:var(--space-4);text-align:center;gap:var(--space-8);max-width:1200px;margin:0 auto}.landing-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-6);max-width:800px;animation:fadeInUp .8s ease-out}.hero-icon{color:var(--color-primary);filter:drop-shadow(var(--shadow-primary-md));margin-bottom:var(--space-4)}.hero-title{font-size:3.5rem;font-weight:800;line-height:1.1;background:linear-gradient(135deg,var(--color-gray-900) 0%,var(--color-primary-hover) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:0}[data-theme=dark] .hero-title{background:linear-gradient(135deg,var(--color-gray-100) 0%,var(--color-primary) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.hero-subtitle{font-size:1.25rem;color:var(--color-gray-600);line-height:1.6;max-width:600px}[data-theme=dark] .hero-subtitle{color:var(--color-gray-400)}.landing-cta{display:flex;gap:var(--space-4);flex-wrap:wrap;justify-content:center;margin-top:var(--space-4)}.cta-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);font-weight:600;font-size:1.1rem;transition:all .2s ease;text-decoration:none;cursor:pointer;border:none}.cta-primary{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-primary-md)}.cta-primary:hover{background:var(--color-primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-primary-lg)}.cta-secondary{background:transparent;color:var(--color-gray-700);border:1px solid var(--color-gray-300)}[data-theme=dark] .cta-secondary{color:var(--color-gray-200);border-color:var(--color-gray-600)}.cta-secondary:hover{background:var(--color-gray-100);color:var(--color-gray-900)}[data-theme=dark] .cta-secondary:hover{background:var(--color-gray-800);color:#fff}.cta-text{background:transparent;color:var(--color-primary-hover);font-weight:500;padding:var(--space-2) var(--space-4);font-size:1rem}.cta-text:hover{text-decoration:underline}@media(max-width:768px){.hero-title{font-size:2.5rem}.landing-features{grid-template-columns:1fr;gap:var(--space-4)}.landing-cta{flex-direction:column;width:100%;max-width:300px}.cta-btn{width:100%;justify-content:center}}.landing-footer{position:absolute;bottom:var(--space-4);left:0;right:0;padding:var(--space-4) 0}.privacy-link{color:var(--color-gray-500);font-size:var(--font-size-sm);text-decoration:none;transition:var(--transition-base);opacity:.8}.privacy-link:hover{color:var(--color-primary);opacity:1}[data-theme=dark] .privacy-link{color:var(--color-gray-400)}[data-theme=dark] .privacy-link:hover{color:var(--color-primary)}.modifier-chip-container{position:relative;display:inline-block}.modifier-chip{display:flex;align-items:center;gap:.375rem;padding:.625rem var(--space-4);border-radius:var(--radius-full);border:1px solid var(--border-color);background-color:var(--bg-secondary);color:var(--text-primary);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;white-space:nowrap;transition:all .2s cubic-bezier(.4,0,.2,1)}.modifier-chip:hover{background-color:var(--bg-tertiary);border-color:var(--text-muted)}.modifier-chip.selected{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary);padding-right:var(--space-2)}.modifier-chip.selected:hover{background-color:var(--accent-hover)}.clear-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:#fff3;transition:background-color .2s}.clear-icon:hover{background-color:#fff6}.modifier-dropdown{position:absolute;top:calc(100% + var(--space-2));left:50%;transform:translate(-50%);background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);padding:var(--space-2);display:flex;flex-direction:column;min-width:15rem;z-index:100;animation:dropdownFadeIn .2s ease-out}@keyframes dropdownFadeIn{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.dropdown-item{text-align:left;padding:.5rem .75rem;border-radius:6px;background:none;border:none;color:var(--text-primary);font-size:.9rem;width:100%;transition:background-color .2s}.dropdown-item:hover{background-color:var(--bg-tertiary)}.dropdown-item.active{color:var(--accent-color);font-weight:600;background-color:var(--bg-primary);border-left:2px solid var(--accent-color)}.home-page.centered{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none;width:100%;max-width:none;padding:0 var(--space-4);position:relative}.home-page.centered:before{content:"";position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(212,116,95,.08) 0%,rgba(232,169,98,.04) 40%,transparent 70%);border-radius:50%;pointer-events:none;z-index:0;animation:ambientDrift 12s ease-in-out infinite}.home-page.centered:after{content:"";position:absolute;top:25%;right:15%;width:300px;height:300px;background:radial-gradient(circle,rgba(232,169,98,.06) 0%,transparent 60%);border-radius:50%;pointer-events:none;z-index:0;animation:ambientDrift 16s ease-in-out infinite reverse}.home-page.centered>*{position:relative;z-index:1}.greeting-row{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-10);flex-direction:column}.home-icon{color:var(--color-primary);filter:drop-shadow(var(--shadow-primary-sm));animation:scaleIn .5s cubic-bezier(.34,1.56,.64,1) both,gentleBob 3s ease-in-out 1s infinite}.greeting{font-family:var(--font-family-display);font-size:var(--font-size-4xl);font-weight:800;font-style:normal;color:var(--text-primary);margin:0;text-align:center;letter-spacing:-.02em;line-height:var(--line-height-snug);padding-bottom:.1em;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-accent) 50%,var(--color-primary-hover) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:fadeInUp-hero .6s ease-out .15s both}.recipe-form{display:flex;flex-direction:column;align-items:center;width:100%;max-width:700px;gap:var(--space-5);margin:var(--space-2) auto;animation:fadeInUp-hero .6s ease-out .3s both}.generate-btn{display:flex;align-items:center;justify-content:center;gap:.75rem;width:auto;min-width:220px;padding:var(--space-4) var(--space-10);font-size:var(--font-size-lg);font-weight:700;background:linear-gradient(135deg,var(--color-primary) 0%,#c9614c 100%);color:#fff;border-radius:var(--radius-full);box-shadow:var(--shadow-lg),var(--shadow-primary-md);transition:var(--transition-bounce);border:none;cursor:pointer;letter-spacing:.01em}.generate-btn:hover:not(:disabled){transform:translateY(-3px) scale(1.03);background:linear-gradient(135deg,var(--color-primary-hover) 0%,#a84f3d 100%);box-shadow:var(--shadow-xl),var(--shadow-primary-lg)}.generate-btn:hover:not(:disabled) .btn-icon{animation:rotateWand .6s ease-in-out}.generate-btn:active:not(:disabled){transform:translateY(0) scale(.98)}.generate-btn:disabled{background:var(--color-gray-400);box-shadow:none;cursor:not-allowed;opacity:.8}.modifiers-container{display:flex;flex-wrap:wrap;gap:.625rem;width:100%;justify-content:center;animation:fadeInUp-hero .6s ease-out .45s both;position:relative;z-index:10}input[type=text]{font-size:var(--font-size-lg);width:100%;padding:1.35rem 1.75rem;border:1px solid var(--border-color);border-radius:var(--radius-2xl);box-sizing:border-box;background-color:var(--bg-surface);background-image:linear-gradient(135deg,var(--bg-surface) 0%,var(--color-primary-subtle, #fff5f2) 100%);color:var(--text-primary);transition:border-color var(--transition-base),box-shadow var(--transition-base),transform var(--transition-base),background-image var(--transition-base);box-shadow:var(--shadow-lg),var(--shadow-inner)}input[type=text]::placeholder{color:var(--text-muted);font-style:italic}input[type=text]:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--shadow-xl),0 0 0 4px #d4745f26;transform:translateY(-2px);background-image:linear-gradient(135deg,var(--bg-surface) 0%,var(--bg-surface) 100%)}.action-buttons{display:flex;gap:var(--space-4);width:100%;justify-content:center;align-items:center;animation:fadeInUp-hero .6s ease-out .55s both}.suggest-btn{display:flex;align-items:center;justify-content:center;gap:.625rem;width:auto;min-width:160px;padding:var(--space-3) var(--space-6);font-size:var(--font-size-base);font-weight:600;background:transparent;color:var(--color-primary);border:1.5px solid rgba(212,116,95,.3);border-radius:var(--radius-full);box-shadow:none;transition:var(--transition-bounce);cursor:pointer}.suggest-btn:hover:not(:disabled){transform:translateY(-2px);background:#d4745f14;border-color:var(--color-primary);box-shadow:var(--shadow-md)}.suggest-btn:hover:not(:disabled) .btn-icon{animation:pulseBulb .6s ease-in-out}.suggest-btn:active:not(:disabled){transform:translateY(0) scale(.98)}.suggest-btn:disabled{border-color:var(--color-gray-300);color:var(--color-gray-400);box-shadow:none;cursor:not-allowed;opacity:.8}.suggestions-section,.suggestions-loading{width:100%;max-width:750px;margin:var(--space-6) auto}.suggestions-heading{font-family:var(--font-family-heading);font-size:var(--font-size-2xl);font-weight:700;margin:0 0 var(--space-5);text-align:center;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.suggestions-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.suggestion-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--space-5) var(--space-4) var(--space-4);background:linear-gradient(135deg,var(--bg-surface) 0%,var(--color-primary-subtle, #fff5f2) 100%);border:1px solid var(--border-color);border-radius:var(--radius-xl);cursor:pointer;transition:var(--transition-bounce);box-shadow:var(--shadow-md);min-height:70px;position:relative;overflow:hidden}.suggestion-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-accent) 100%);border-radius:var(--radius-xl) var(--radius-xl) 0 0;opacity:.6;transition:opacity var(--transition-base)}.suggestion-card:hover{transform:translateY(-4px) scale(1.02);border-color:var(--color-primary);box-shadow:var(--shadow-lg),var(--shadow-primary-lg)}.suggestion-card:hover:before{opacity:1}.suggestion-card:hover .suggestion-number{transform:scale(1.15);background:var(--color-primary-hover)}.suggestion-card:active{transform:translateY(0) scale(.97)}.suggestion-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--color-primary);color:#fff;font-size:var(--font-size-xs);font-weight:700;font-family:var(--font-family-heading);margin-bottom:var(--space-2);flex-shrink:0;transition:var(--transition-bounce)}.suggestion-title{font-family:var(--font-family-heading);font-size:var(--font-size-base);font-weight:700;color:var(--text-primary);margin:0}.suggestion-card.skeleton{cursor:default;pointer-events:none;animation:skeletonPulse 2s ease-in-out infinite,fadeInUp .4s ease-out both;animation-delay:calc(var(--card-index, 0) * .06s),calc(var(--card-index, 0) * .06s)}.skeleton-number{width:24px;height:24px;border-radius:50%;background:linear-gradient(90deg,var(--skeleton-base, #e0e0e0) 25%,var(--skeleton-highlight, #f0f0f0) 50%,var(--skeleton-base, #e0e0e0) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;margin-bottom:var(--space-2)}.suggestion-card.skeleton .skeleton-title,.suggestion-card.skeleton .skeleton-subtitle{height:.875rem;border-radius:var(--radius-md);background:linear-gradient(90deg,var(--skeleton-base, #e0e0e0) 25%,var(--skeleton-highlight, #f0f0f0) 50%,var(--skeleton-base, #e0e0e0) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite}.suggestion-card.skeleton .skeleton-title{width:75%}.suggestion-card.skeleton .skeleton-subtitle{width:50%;margin-top:var(--space-2)}.suggestion-card.streaming-in{animation:streamReveal .4s cubic-bezier(.34,1.56,.64,1) both}.suggestion-card.generated-in{animation:popIn .45s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--card-index, 0) * .06s)}[data-theme=dark] .home-page.centered:before{background:radial-gradient(circle,rgba(201,139,120,.1) 0%,rgba(232,169,98,.05) 40%,transparent 70%)}[data-theme=dark] .home-page.centered:after{background:radial-gradient(circle,rgba(232,169,98,.07) 0%,transparent 60%)}[data-theme=dark] input[type=text]{background-image:linear-gradient(135deg,var(--bg-surface) 0%,rgba(201,139,120,.06) 100%);box-shadow:var(--shadow-lg),inset 0 2px 4px #00000026}[data-theme=dark] input[type=text]:focus{box-shadow:var(--shadow-xl),0 0 0 4px #c98b7833;background-image:linear-gradient(135deg,var(--bg-surface) 0%,var(--bg-surface) 100%)}[data-theme=dark] .suggest-btn{border-color:#c98b7840;color:var(--accent-color)}[data-theme=dark] .suggest-btn:hover:not(:disabled){background:#c98b781a;border-color:var(--accent-color)}[data-theme=dark] .suggestion-card{background:linear-gradient(135deg,var(--bg-surface) 0%,rgba(201,139,120,.08) 100%)}[data-theme=dark] .suggestion-card:before{opacity:.4}[data-theme=dark] .suggestion-card:hover:before{opacity:.8}[data-theme=dark] .suggestion-number{background:var(--accent-color)}[data-theme=dark] .suggestion-card:hover .suggestion-number{background:var(--accent-hover)}[data-theme=dark] .suggestion-card:hover{box-shadow:var(--shadow-lg),0 6px 20px #c98b7826}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes skeletonPulse{0%,to{border-color:var(--border-color);box-shadow:var(--shadow-sm)}50%{border-color:#d4745f33;box-shadow:var(--shadow-md),0 0 0 1px #d4745f14}}@keyframes streamReveal{0%{opacity:0;transform:scale(.8) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes popIn{0%{opacity:0;transform:translateY(16px) scale(.9)}60%{opacity:1;transform:translateY(-4px) scale(1.02)}to{opacity:1;transform:translateY(0) scale(1)}}button{border:none;border-radius:var(--radius-lg);cursor:pointer;transition:var(--transition-base)}@media screen and (max-width:768px){.recipe-form{max-width:100%}.home-page:not(.centered){padding-top:calc(4rem + env(safe-area-inset-top))}.home-page.centered{height:var(--visual-viewport-height, 100%);min-height:-webkit-fill-available;margin-top:0;padding:0 var(--space-4)}.home-page.centered:before{width:350px;height:350px}.home-page.centered:after{width:200px;height:200px;top:20%;right:5%}.greeting{font-size:var(--font-size-3xl)}.greeting-row{margin-bottom:var(--space-6)}input[type=text]{width:100%;padding:1rem 1.25rem;font-size:var(--font-size-base)}.action-buttons{flex-direction:column;gap:var(--space-3)}.generate-btn,.suggest-btn{width:100%;min-width:unset}.generate-btn{padding:var(--space-3) var(--space-6)}.suggest-btn{padding:.625rem var(--space-5);font-size:var(--font-size-sm)}.suggestions-grid{grid-template-columns:1fr}.suggestion-card:not(.skeleton){flex-direction:row;gap:var(--space-3);padding:var(--space-4) var(--space-3);min-height:56px}.suggestion-card:not(.skeleton) .suggestion-number{margin-bottom:0;width:22px;height:22px;font-size:.65rem}.suggestion-card.skeleton{flex-direction:row;gap:var(--space-3);padding:var(--space-4) var(--space-3)}.suggestion-card.skeleton .skeleton-number{margin-bottom:0;width:22px;height:22px;flex-shrink:0}}@media screen and (max-width:768px)and (display-mode:standalone){.home-page:not(.centered){padding-top:calc(1rem + env(safe-area-inset-top))}}.modal-overlay{position:fixed;inset:0;background-color:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}.modal-content{background-color:var(--bg-surface);padding:var(--space-8);border-radius:var(--radius-2xl);max-width:400px;width:90%;box-shadow:var(--shadow-xl);text-align:center;border:1px solid var(--glass-border);animation:scaleUp .3s cubic-bezier(.16,1,.3,1)}.modal-content h2{margin-top:0;margin-bottom:var(--space-4);color:var(--text-primary);font-family:var(--font-family-heading)}.modal-content p{color:var(--text-secondary);margin-bottom:var(--space-6);line-height:var(--line-height-relaxed)}.modal-actions{display:flex;flex-direction:column;gap:var(--space-3)}.modal-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 1rem;border-radius:var(--radius-xl);font-weight:600;cursor:pointer;text-decoration:none;transition:var(--transition-base);width:100%;box-sizing:border-box}.modal-btn.primary{background-color:var(--color-primary);color:#fff;border:none;box-shadow:var(--shadow-md)}.modal-btn.primary:hover{background-color:var(--color-primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-lg)}.modal-btn.secondary{background-color:transparent;color:var(--text-primary);border:1px solid var(--border-color)}.modal-btn.secondary:hover{background-color:var(--bg-tertiary);border-color:var(--text-secondary)}
