:root{--primary-green:#0ea861;--green-hover:#0c8f52;--green-light:#e8f7f0;--green-border:#b8e6d5;--text-primary:#202124;--text-secondary:#5f6368;--border:#dadce0;--bg-gray:#f8f9fa;--white:#fff;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-size-sm:14px;--font-size-base:16px;--font-size-lg:20px;--font-size-xl:32px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--white);color:var(--text-primary);font-family:var(--font-sans);line-height:1.5;-webkit-font-smoothing:antialiased;animation:pageLoad .4s ease-out}@keyframes pageLoad{0%{opacity:0}to{opacity:1}}.container{display:flex;flex-direction:column;margin:0 auto;max-width:720px;min-height:100vh;padding:var(--space-lg)}header{align-items:center;display:flex;justify-content:space-between;padding:var(--space-md) 0 var(--space-2xl)}.logo{color:var(--text-primary);font-size:var(--font-size-lg);font-weight:500}nav{display:flex;gap:var(--space-lg)}.nav-link{color:var(--text-secondary);font-size:var(--font-size-sm);text-decoration:none;transition:color .2s}.mobile-menu-btn,.nav-link:hover{color:var(--text-primary)}.mobile-menu-btn{align-items:center;background:none;border:none;cursor:pointer;display:none;font-size:24px;justify-content:center;min-height:44px;min-width:44px;padding:8px}.mobile-menu-btn:hover{background:var(--bg-gray);border-radius:8px}.mobile-close-btn{background:none;border:none;border-radius:50%;color:var(--text-secondary);cursor:pointer;display:none;font-size:32px;height:44px;position:absolute;right:16px;top:16px;transition:background .2s;width:44px}.mobile-close-btn:hover{background:var(--bg-gray)}.mobile-menu-overlay{background:rgba(0,0,0,.5);bottom:0;display:none;left:0;position:fixed;right:0;top:0;z-index:999}main{display:flex;flex:1;flex-direction:column;justify-content:center;padding-bottom:var(--space-2xl)}h1{animation:fadeInUp .6s ease-out;font-size:var(--font-size-xl);font-weight:400;line-height:1.3;margin-bottom:var(--space-md)}.subtitle,h1{text-align:center}.subtitle{animation:fadeInUp .6s ease-out .1s both;color:var(--text-secondary);font-size:var(--font-size-base);margin-bottom:var(--space-2xl)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.converter-card{animation:cardAppear .5s ease-out .1s both;background:var(--white);border:1px solid var(--border);border-radius:24px;box-shadow:0 1px 6px rgba(32,33,36,.08);margin-bottom:var(--space-lg);padding:var(--space-xl);transition:box-shadow .3s ease,transform .3s ease}.converter-card:hover{box-shadow:0 4px 16px rgba(32,33,36,.12)}@keyframes cardAppear{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.model-selector{display:flex;gap:var(--space-sm);justify-content:center;margin-bottom:var(--space-lg)}.model-btn{background:var(--white);border:1px solid var(--border);border-radius:20px;color:var(--text-secondary);cursor:pointer;font-size:var(--font-size-sm);font-weight:500;padding:var(--space-sm) var(--space-lg);position:relative;transition:all .25s cubic-bezier(.4,0,.2,1)}.model-btn:hover{border-color:var(--primary-green);box-shadow:0 2px 8px rgba(14,168,97,.15);color:var(--primary-green);transform:translateY(-2px)}.model-btn:active{transform:translateY(0)}.model-btn.active{background:var(--green-light);border-color:var(--primary-green);color:var(--primary-green);transform:scale(1.02)}.model-btn.active:hover{transform:scale(1.02) translateY(-2px)}textarea{border:1px solid var(--border);border-radius:12px;color:var(--text-primary);font-family:var(--font-sans);font-size:var(--font-size-base);margin-bottom:var(--space-lg);padding:var(--space-md);resize:vertical;transition:border-color .2s,box-shadow .2s;width:100%}textarea:focus{border-color:var(--primary-green);box-shadow:0 0 0 3px var(--green-light);outline:none}textarea::placeholder{color:var(--text-secondary)}.error-message{align-items:center;animation:slideDown .3s ease;background:#fef2f2;border:1px solid #fca5a5;border-radius:8px;color:#991b1b;display:flex;font-size:var(--font-size-sm);gap:var(--space-sm);margin-bottom:var(--space-md);padding:var(--space-sm) var(--space-md)}.error-icon{font-size:18px}.error-text{flex:1}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}textarea.error{border-color:#fca5a5}textarea.error:focus{border-color:#f87171;box-shadow:0 0 0 3px #fee2e2}.convert-btn{background:var(--primary-green);border:none;border-radius:12px;color:var(--white);cursor:pointer;font-size:var(--font-size-base);font-weight:500;overflow:hidden;padding:var(--space-md) var(--space-xl);position:relative;transition:all .2s cubic-bezier(.4,0,.2,1);width:100%}.convert-btn:before{background:hsla(0,0%,100%,.2);border-radius:50%;content:"";height:0;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s;width:0}.convert-btn:hover:before{height:300px;width:300px}.convert-btn:hover{background:var(--green-hover);box-shadow:0 4px 12px rgba(14,168,97,.3);transform:translateY(-1px)}.convert-btn:active{box-shadow:0 2px 6px rgba(14,168,97,.2);transform:translateY(0) scale(.98)}.results{border-top:1px solid var(--border);margin-top:var(--space-lg);padding-top:var(--space-lg)}.results-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--space-md)}.results-header h2{font-size:var(--font-size-lg);font-weight:500}.close-btn{align-items:center;background:none;border:none;border-radius:50%;color:var(--text-secondary);cursor:pointer;display:flex;font-size:28px;height:44px;justify-content:center;padding:0;transition:background .2s;width:44px}.close-btn:hover{background:var(--bg-gray)}.quick-links{align-items:center;color:var(--text-secondary);display:flex;font-size:var(--font-size-sm);gap:var(--space-sm);justify-content:center;text-align:center}.quick-links a{color:var(--primary-green);text-decoration:none}.quick-links a:hover{text-decoration:underline}footer{border-top:1px solid var(--border);display:flex;font-size:var(--font-size-sm);gap:var(--space-lg);justify-content:center;padding:var(--space-lg) 0}footer a{color:var(--text-secondary);text-decoration:none}footer a:hover{text-decoration:underline}.disclaimer{color:var(--text-secondary);font-size:12px;margin:0 auto;max-width:600px;padding:var(--space-md) 0;text-align:center}@media (max-width:640px){.container{padding:var(--space-md)}h1{font-size:24px}.converter-card{border-radius:16px;padding:var(--space-lg)}.model-selector,.quick-links{flex-wrap:wrap}.quick-links{font-size:13px}.mobile-menu-btn{display:flex}nav{align-items:flex-start;background:var(--white);bottom:0;box-shadow:-2px 0 16px rgba(0,0,0,.1);flex-direction:column;gap:var(--space-lg);padding:var(--space-2xl) var(--space-lg);position:fixed;right:-280px;top:0;transition:right .3s ease;width:280px;z-index:1000}nav.open{right:0}.mobile-menu-overlay.active,nav.open .mobile-close-btn{display:block}nav .nav-link{align-items:center;display:flex;font-size:var(--font-size-base);min-height:44px;padding:var(--space-sm) 0;width:100%}}.convert-btn.loading{background:var(--text-secondary);cursor:wait;pointer-events:none}.btn-loader{animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.convert-btn.loading:hover{box-shadow:none;transform:none}.convert-btn.loading:before{display:none}.results{animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.ingredients-section{animation:fadeIn .3s ease-in;background:var(--bg-gray);border-radius:16px;margin-top:var(--space-2xl);padding:var(--space-xl)}.section-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--space-md)}.section-header h2{font-size:var(--font-size-lg);font-weight:500}.close-ingredients-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:32px;height:32px;line-height:1;padding:0;transition:color .2s;width:32px}.close-ingredients-btn:hover{color:var(--text-primary)}.ingredients-subtitle{color:var(--text-secondary);margin-bottom:var(--space-lg)}.ingredient-search{border:1px solid var(--border);border-radius:24px;font-size:var(--font-size-base);margin-bottom:var(--space-lg);padding:12px 16px;transition:all .2s;width:100%}.ingredient-search:focus{border-color:var(--primary-green);box-shadow:0 0 0 4px rgba(14,168,97,.1);outline:none}.selected-ingredients-box{background:var(--white);border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.1);margin-bottom:var(--space-lg);padding:var(--space-lg)}.selected-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--space-md)}.selected-header h3{font-size:var(--font-size-base);font-weight:500;margin:0}.clear-btn{background:none;border:none;color:var(--primary-green);cursor:pointer;font-size:var(--font-size-sm);padding:var(--space-xs) var(--space-sm);transition:color .2s}.clear-btn:hover{color:var(--green-hover)}.selected-list{display:flex;flex-wrap:wrap;gap:var(--space-sm)}.selected-tag{align-items:center;background:var(--green-light);border-radius:20px;display:inline-flex;font-size:var(--font-size-sm);gap:var(--space-xs);padding:var(--space-sm) var(--space-md)}.selected-tag .remove{cursor:pointer;font-weight:700;margin-left:var(--space-xs)}.ingredient-grid{display:grid;gap:var(--space-sm);grid-template-columns:repeat(auto-fill,minmax(120px,1fr));margin-bottom:var(--space-lg)}.ingredient-card{align-items:center;background:var(--white);border:2px solid var(--border);border-radius:12px;cursor:pointer;display:flex;font-size:var(--font-size-sm);justify-content:center;min-height:56px;padding:var(--space-md);text-align:center;transition:all .2s}.ingredient-card:hover{border-color:var(--primary-green);box-shadow:0 4px 12px rgba(0,0,0,.1);transform:translateY(-2px)}.ingredient-card.selected{background:var(--green-light);border-color:var(--primary-green)}.suggestions-section{margin-top:var(--space-xl)}.suggestions-section h3{font-size:var(--font-size-lg);margin-bottom:var(--space-lg)}.suggestion-card{background:var(--white);border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.1);margin-bottom:var(--space-lg);padding:var(--space-lg)}.suggestion-header{align-items:start;display:flex;justify-content:space-between;margin-bottom:var(--space-sm)}.suggestion-title{color:var(--primary-green);font-size:var(--font-size-base);font-weight:500;margin:0}.match-badge{background:var(--green-light);border-radius:12px;font-size:var(--font-size-sm);font-weight:600;padding:var(--space-xs) var(--space-sm);white-space:nowrap}.suggestion-description,.suggestion-meta{color:var(--text-secondary);margin-bottom:var(--space-md)}.suggestion-meta{display:flex;font-size:var(--font-size-sm);gap:var(--space-md)}.suggestion-ingredients{font-size:var(--font-size-sm);margin-bottom:var(--space-md)}.suggestion-ingredients strong{color:var(--text-primary)}@media (max-width:640px){.ingredients-section{margin-top:var(--space-lg);padding:var(--space-lg)}.ingredient-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.section-header h2{font-size:var(--font-size-base)}}