:root{--primary-orange: #ff6a00;--primary-orange-dark: #e55a00;--primary-gradient: linear-gradient(135deg, #ff7e00, #ff4b00);--primary-gradient-hover: linear-gradient(135deg, #e06b00, #d63a00);--danger-red: #ff4757;--danger-red-dark: #ff3742;--success-green: #10b981;--warning-yellow: #f59e0b;--black: #1a1a1a;--white: #ffffff;--gray-50: #f8fafc;--gray-100: #f1f5f9;--gray-200: #e2e8f0;--gray-300: #cbd5e1;--gray-400: #94a3b8;--gray-500: #64748b;--gray-600: #475569;--gray-700: #334155;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1);--transition-fast: .15s ease-out;--transition-normal: .25s ease-out;--transition-slow: .35s ease-out}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto Condensed,-apple-system,BlinkMacSystemFont,sans-serif;background:linear-gradient(135deg,#fff7ef,#fdeedc,#fdf6f0);min-height:100vh;line-height:1.6;color:var(--black);padding:var(--space-8) var(--space-4)}.header{background:transparent;text-align:center;margin-bottom:var(--space-8);animation:slideInDown .8s ease-out}.nav-header{display:flex;justify-content:center;align-items:center;gap:var(--space-4);padding:var(--space-4) 0}.logo{width:3rem;height:3rem;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));transition:all var(--transition-normal);animation:bounce 2s ease-in-out infinite}.logo:hover{transform:scale(1.1) rotate(5deg);filter:drop-shadow(0 6px 12px rgba(255,106,0,.3))}.nav-header h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;color:var(--black);background:linear-gradient(135deg,var(--primary-orange),#ff8c00);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 2px 4px rgba(0,0,0,.1);letter-spacing:-.02em;line-height:1.1}main{display:flex;justify-content:center;align-items:flex-start;min-height:100vh}.container{background:var(--white);max-width:600px;width:100%;padding:var(--space-8);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);border:1px solid var(--gray-200);transition:all var(--transition-normal)}.container:hover{box-shadow:0 25px 50px -12px #00000026}.alert-slide{position:fixed;top:0;left:50%;transform:translate(-50%) translateY(-100%);background:var(--danger-red);color:var(--white);padding:var(--space-4) var(--space-6);border-radius:0 0 var(--radius-md) var(--radius-md);font-weight:600;font-size:.875rem;box-shadow:var(--shadow-lg);z-index:1000;animation:slideInDown .3s ease-out forwards;text-align:center;min-width:300px}.ingredients-alert{background:linear-gradient(135deg,#fff3cd,#fff8e1);border:1px solid #ffeaa7;color:#856404;padding:var(--space-4);border-radius:var(--radius-lg);text-align:center;font-size:.9rem;margin-bottom:var(--space-6);font-weight:500;animation:fadeIn .5s ease-out}.search-bar{display:flex;gap:var(--space-3);margin-bottom:var(--space-8);flex-wrap:wrap}.search-bar input{flex:1;min-width:200px;padding:var(--space-4);font-size:1rem;border:2px solid var(--gray-200);border-radius:var(--radius-lg);background:var(--white);transition:all var(--transition-fast);font-family:inherit;outline:none}.search-bar input:focus{border-color:var(--primary-orange);box-shadow:0 0 0 3px #ff6a001a;transform:translateY(-1px)}.search-bar input::placeholder{color:var(--gray-400)}.add-btn{background:var(--black);color:var(--white);border:none;padding:var(--space-4) var(--space-6);border-radius:var(--radius-lg);cursor:pointer;font-size:.875rem;font-weight:600;font-family:inherit;transition:all var(--transition-normal);white-space:nowrap;flex:1;min-width:120px}.add-btn:hover{background:var(--gray-700);transform:translateY(-2px);box-shadow:var(--shadow-md)}.add-btn:active{transform:translateY(0)}.add-btn.clear{background:var(--danger-red)}.add-btn.clear:hover{background:var(--danger-red-dark)}.ingredients{margin-bottom:var(--space-8)}.ingredients h2{font-size:1.25rem;font-weight:700;color:var(--black);margin-bottom:var(--space-4);display:flex;align-items:center;gap:var(--space-3)}.ingredients h2:after{content:"";flex:1;height:2px;background:linear-gradient(90deg,var(--primary-orange),transparent)}.ingredients>p{color:var(--gray-500);font-style:italic;text-align:center;padding:var(--space-8);background:var(--gray-50);border-radius:var(--radius-lg);border:2px dashed var(--gray-200)}.ingredients ul{list-style:none;background:var(--gray-50);border-radius:var(--radius-lg);border:1px solid var(--gray-200);overflow:hidden}.ingredient-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--gray-200);transition:all var(--transition-fast);animation:slideInLeft .3s ease-out}.ingredient-item:hover{background:var(--white);transform:translate(4px)}.ingredient-item:last-child{border-bottom:none}.ingredient-item .delete-btn{width:28px;height:28px;border:none;border-radius:var(--radius-md);background:var(--danger-red);color:var(--white);cursor:pointer;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);font-size:.75rem;opacity:.7}.ingredient-item:hover .delete-btn{opacity:1}.delete-btn:hover{background:var(--danger-red-dark);transform:scale(1.1)}.footer-box{background:linear-gradient(135deg,#fff9f4,#fff0e6);border:2px solid #ffd9b3;padding:var(--space-8);border-radius:var(--radius-xl);text-align:center;animation:bounceIn .6s ease-out}.footer-text .title{font-size:1.25rem;font-weight:700;color:var(--black);margin-bottom:var(--space-2)}.footer-text .subtitle{font-size:.9rem;color:var(--gray-600);margin-bottom:var(--space-6);line-height:1.5}.recipe-btn{background:var(--primary-gradient);color:var(--white);border:none;padding:var(--space-5) var(--space-10);border-radius:var(--radius-lg);cursor:pointer;font-size:1rem;font-weight:700;font-family:inherit;transition:all var(--transition-normal);box-shadow:0 4px 12px #ff6a004d;position:relative;overflow:hidden}.recipe-btn:hover{background:var(--primary-gradient-hover);transform:translateY(-3px);box-shadow:0 8px 20px #ff6a0066}.recipe-btn:active{transform:translateY(-1px)}.recipe-display{margin-top:var(--space-8);padding:var(--space-8);background:var(--gray-50);border-radius:var(--radius-xl);border:2px solid var(--gray-200);animation:slideInUp .5s ease-out}.loading-spinner{text-align:center;padding:var(--space-12);background:var(--gray-50);border-radius:var(--radius-xl);border:2px dashed var(--gray-300);margin-top:var(--space-8);animation:fadeIn .5s ease-out}.spinner{width:50px;height:50px;border:4px solid var(--gray-200);border-top:4px solid var(--primary-orange);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto var(--space-4)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-spinner p{color:var(--gray-600);font-weight:500;font-size:1.1rem}.recipe-content{line-height:1.7;color:var(--gray-700)}.recipe-heading{margin:var(--space-6) 0 var(--space-4) 0;color:var(--black);font-weight:700}.recipe-heading.level-1{font-size:1.5rem;border-bottom:2px solid var(--primary-orange);padding-bottom:var(--space-2)}.recipe-heading.level-2{font-size:1.3rem;color:var(--gray-800)}.recipe-heading.level-3{font-size:1.1rem;color:var(--gray-700)}.recipe-paragraph{margin-bottom:var(--space-4);text-align:left}.recipe-list-item{margin-bottom:var(--space-2);padding-left:var(--space-4);position:relative}.recipe-list-item:before{content:"•";color:var(--primary-orange);font-weight:700;position:absolute;left:0}.recipe-content strong{color:var(--black);font-weight:700}.recipe-content ul{list-style:none;margin:var(--space-4) 0;padding-left:var(--space-4)}.recipe-btn:disabled{opacity:.7;cursor:not-allowed;transform:none!important}.recipe-btn:disabled:hover{transform:none!important;box-shadow:0 4px 12px #ff6a004d!important}html{scroll-behavior:smooth}.recipe-display{margin-top:var(--space-8);padding:var(--space-8);background:linear-gradient(135deg,#f8fafc,#fff);border-radius:var(--radius-xl);border:2px solid var(--gray-200);animation:slideInUp .5s ease-out;box-shadow:0 4px 20px #00000014}.recipe-display h3{text-align:center;margin-bottom:var(--space-6);font-size:1.5rem;background:linear-gradient(135deg,var(--primary-orange),#ff8c00);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}@keyframes slideInDown{0%{transform:translate(-50%) translateY(-100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes bounceIn{0%{opacity:0;transform:scale(.8)}50%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.nav-header{gap:var(--space-3);padding:var(--space-3) 0}.logo{width:2.5rem;height:2.5rem}.nav-header h1{font-size:clamp(1.75rem,5vw,2.5rem)}}@media (max-width: 480px){.nav-header{flex-direction:column;gap:var(--space-2)}.logo{width:2.25rem;height:2.25rem}.nav-header h1{font-size:1.5rem;letter-spacing:-.01em}.header{margin-bottom:var(--space-6)}}@media (prefers-reduced-motion: reduce){.logo{animation:none}.logo:hover{transform:none}.header{animation:none}}@media (max-width: 768px){body{padding:var(--space-4)}.container{padding:var(--space-6);border-radius:var(--radius-lg)}.search-bar{flex-direction:column}.search-bar input{min-width:auto}.add-btn{width:100%}.footer-box{padding:var(--space-6)}.recipe-btn{width:100%;padding:var(--space-4)}}@media (max-width: 480px){.container{padding:var(--space-4)}.ingredient-item{padding:var(--space-3) var(--space-4)}.alert-slide{left:0;right:0;transform:translateY(-100%);border-radius:0;min-width:auto;animation:slideInDownMobile .3s ease-out forwards}@keyframes slideInDownMobile{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}}.loading{opacity:.7;pointer-events:none}button:focus-visible,input:focus-visible{outline:2px solid var(--primary-orange);outline-offset:2px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}