:root{--primary-gradient:linear-gradient(135deg,#667eea,#764ba2);--secondary-gradient:linear-gradient(135deg,#f093fb,#f5576c);--success-color:#10b981;--error-color:#ef4444;--warning-color:#f59e0b;--glass-bg:hsla(0,0%,100%,.1);--glass-border:hsla(0,0%,100%,.2);--shadow-lg:0 20px 60px rgba(0,0,0,.3);--shadow-md:0 10px 30px rgba(0,0,0,.2)}*{box-sizing:border-box;margin:0;padding:0}.app{background:linear-gradient(135deg,#667eea,#764ba2);background:var(--primary-gradient);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;min-height:100vh;overflow-x:hidden;padding:20px;position:relative}.app:before{background-image:radial-gradient(circle at 20% 50%,hsla(0,0%,100%,.05) 0,transparent 50%),radial-gradient(circle at 80% 80%,hsla(0,0%,100%,.05) 0,transparent 50%);content:"";height:100%;left:0;pointer-events:none;position:fixed;top:0;width:100%;z-index:0}.app-container{margin:0 auto;max-width:1400px;position:relative;z-index:1}.app-header{align-items:center;animation:fadeInDown .8s ease-out;display:flex;justify-content:space-between;margin-bottom:40px}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.header-content{text-align:center;width:100%}.header-content p{font-size:1.1rem;font-weight:400;letter-spacing:1px;margin-top:8px;opacity:.9}button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;box-shadow:0 4px 15px rgba(102,126,234,.4);color:#fff;cursor:pointer;font-size:1rem;font-weight:600;overflow:hidden;padding:12px 28px;position:relative;transition:all .3s ease}button:before{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.3),transparent);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s;width:100%}button:hover:before{left:100%}button:hover{box-shadow:0 6px 25px rgba(102,126,234,.6);transform:translateY(-2px)}button:active{transform:translateY(0)}button:disabled{cursor:not-allowed;opacity:.6;transform:none}.spinner{border:3px solid hsla(0,0%,100%,.3);display:inline-block;height:24px;margin-left:10px;width:24px}.grid{grid-gap:28px;gap:28px;grid-template-columns:repeat(auto-fit,minmax(380px,1fr))}.column{animation:slideUp .6s ease-out both}.column:first-child{animation-delay:.1s}.column:nth-child(2){animation-delay:.2s}.column:nth-child(3){animation-delay:.3s}.grid{grid-gap:50px;align-items:start;display:grid;gap:50px;grid-template-columns:repeat(auto-fit,minmax(400px,1fr))}.column{display:flex;flex-direction:column}.column.full-width{grid-column:1/-1;margin-top:20px}.app-header{display:block;margin-bottom:50px;padding:0 10px;position:relative;text-align:center}.header-content h1{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,#fff,#f0f0f0);-webkit-background-clip:text;background-clip:text;display:inline-block;font-size:2.5rem;font-weight:800;margin:0;text-shadow:0 4px 20px rgba(0,0,0,.1)}.help-btn{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:hsla(0,0%,100%,.15);border:1px solid hsla(0,0%,100%,.2);border-radius:30px;box-shadow:0 4px 15px rgba(0,0,0,.1);color:#fff;padding:10px 18px;position:fixed;right:24px;top:24px;z-index:900}.help-btn:hover{background:hsla(0,0%,100%,.25);box-shadow:0 8px 20px rgba(0,0,0,.2);transform:translateY(-2px)}.recipe-loader{background:rgba(0,0,0,.2);border:1px dashed hsla(0,0%,100%,.3);border-radius:12px;gap:12px;margin-bottom:24px;padding:16px}.recipe-btn,.recipe-loader{align-items:center;display:flex}.recipe-btn{background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.1);border-radius:8px;color:#fff;cursor:pointer;font-size:.9rem;font-weight:600;gap:8px;padding:8px 16px;transition:all .2s}.recipe-btn:hover{background:hsla(0,0%,100%,.2);border-color:hsla(0,0%,100%,.3)}@media (max-width:768px){.app{padding:15px}.column.full-width{grid-column:1}.card{padding:20px}button{font-size:.95rem;padding:10px 20px}}@media (max-width:480px){.header-content h1{font-size:2rem}.app-footer{font-size:.85rem;padding:20px 15px}}.help-btn-fixed{align-items:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:hsla(0,0%,100%,.15);border:1px solid hsla(0,0%,100%,.2);border-radius:30px;box-shadow:0 4px 15px rgba(0,0,0,.1);color:#fff;cursor:pointer;display:flex;font-weight:600;gap:8px;padding:10px 20px;position:fixed;right:24px;top:24px;transition:all .3s ease;z-index:1000}.help-btn-fixed:hover{background:hsla(0,0%,100%,.25);border-color:hsla(0,0%,100%,.4);box-shadow:0 8px 25px rgba(0,0,0,.2);transform:translateY(-2px)}.app-hero{margin-bottom:60px;padding:20px;text-align:center}.hero-title{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,#fff,#d1d5db);-webkit-background-clip:text;background-clip:text;font-size:3.5rem;font-weight:800;margin:0 0 16px;text-shadow:0 10px 30px rgba(0,0,0,.2)}.hero-subtitle{color:hsla(0,0%,100%,.8);font-size:1.25rem;letter-spacing:1px;margin-bottom:24px}.hero-badges{display:flex;gap:12px;justify-content:center}.badge{background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.05);border-radius:20px;color:hsla(0,0%,100%,.9);font-size:.85rem;padding:6px 12px}.app-footer-modern{border-top:1px solid hsla(0,0%,100%,.1);margin-top:100px;padding-bottom:40px;padding-top:60px;text-align:center}.footer-mission{margin:0 auto 30px;max-width:600px}.footer-mission p{color:#fff;font-size:1.1rem;font-weight:500;line-height:1.6}.footer-sub{color:hsla(0,0%,100%,.6);display:block;font-size:.95rem;font-weight:400;margin-top:12px}.footer-bottom{border-top:1px solid hsla(0,0%,100%,.05);color:hsla(0,0%,100%,.4);font-size:.85rem;padding-top:20px}@media (max-width:768px){.hero-title{font-size:2.5rem}.footer-content{text-align:center}.footer-col{margin-bottom:20px}}.success-overlay{bottom:0;left:0;pointer-events:none;position:fixed;right:0;top:0;z-index:9999}.success-checkmark,.success-overlay{align-items:center;display:flex;justify-content:center}.success-checkmark{animation:successPop .6s cubic-bezier(.68,-.55,.265,1.55);background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;box-shadow:0 10px 40px rgba(102,126,234,.4);height:100px;width:100px}.success-checkmark:after{color:#fff;content:"✓";font-size:60px;font-weight:700}@keyframes successPop{0%{opacity:0;transform:scale(0) rotate(-180deg)}50%{transform:scale(1.2) rotate(10deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}.theme-toggle{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);border-radius:50px;color:#fff;cursor:pointer;display:flex;font-size:14px;gap:8px;padding:10px 20px;position:fixed;right:20px;top:20px;transition:all .3s ease;z-index:1000}.theme-toggle:hover{background:hsla(0,0%,100%,.15);box-shadow:0 4px 12px rgba(0,0,0,.2);transform:translateY(-2px)}.theme-icon{font-size:20px;transition:transform .3s ease}.theme-toggle:hover .theme-icon{transform:rotate(20deg)}body.light-mode,body.light-mode .app{background:linear-gradient(135deg,#f5f7fa,#c3cfe2)}body.light-mode .card{background:hsla(0,0%,100%,.9);border:1px solid rgba(0,0,0,.1)}body.light-mode h1,body.light-mode h2,body.light-mode h3,body.light-mode label,body.light-mode p{color:#2d3748}body.light-mode .format-btn{background:rgba(102,126,234,.1);border:1px solid rgba(102,126,234,.2);color:#667eea}body.light-mode .format-btn.active{color:#fff}body.light-mode .convert-btn,body.light-mode .format-btn.active{background:linear-gradient(135deg,#667eea,#764ba2)}.shortcuts-hint{animation:fadeInOut 4s ease-in-out;background:rgba(0,0,0,.8);border-radius:8px;bottom:20px;color:#fff;font-size:12px;left:20px;opacity:0;padding:12px 16px;pointer-events:none;position:fixed;z-index:1000}@keyframes fadeInOut{0%,to{opacity:0}10%,90%{opacity:1}}.shortcuts-hint kbd{background:hsla(0,0%,100%,.2);border-radius:4px;font-family:monospace;margin:0 2px;padding:2px 6px}.format-icon{display:inline-block;font-size:24px;margin-right:8px}.file-icon{font-size:48px;margin-bottom:12px}.tooltip{display:inline-block;position:relative}.tooltip .tooltiptext{background-color:rgba(0,0,0,.9);border-radius:6px;bottom:125%;color:#fff;font-size:12px;left:50%;margin-left:-100px;opacity:0;padding:8px;position:absolute;text-align:center;transition:opacity .3s;visibility:hidden;width:200px;z-index:1}.tooltip .tooltiptext:after{border:5px solid transparent;border-top-color:rgba(0,0,0,.9);content:"";left:50%;margin-left:-5px;position:absolute;top:100%}.tooltip:hover .tooltiptext{opacity:1;visibility:visible}.confetti{animation:confetti-fall 3s linear forwards;background:#f0f;height:10px;position:fixed;position:absolute;width:10px}@media (max-width:768px){.app,.app-container{padding:10px}.app-header h1{font-size:1.5rem}.app-header p{font-size:.85rem}.grid{gap:15px;grid-template-columns:1fr!important}.card{margin-bottom:15px;padding:16px}.format-btn{font-size:14px;min-height:44px;padding:10px 16px}.convert-btn{font-size:16px;min-height:50px;width:100%}.upload-area{min-height:150px;padding:20px}.history-item{font-size:14px;padding:12px}.theme-toggle{font-size:12px;padding:8px 12px;right:10px;top:10px}.quality-slider{height:8px}.quality-slider::-webkit-slider-thumb{height:24px;width:24px}.mode-toggle{flex-direction:column;gap:8px}.mode-toggle button{width:100%}}@media (min-width:769px) and (max-width:1024px){.grid{gap:20px;grid-template-columns:1fr 1fr}.format-btn{font-size:13px}}@media (hover:none) and (pointer:coarse){button{min-height:44px;min-width:44px}.format-btn:hover{transform:none}*{-webkit-tap-highlight-color:rgba(102,126,234,.3)}}.app{animation:fadeIn .5s ease-in}.card{animation:slideUp .4s cubic-bezier(.4,0,.2,1)}.format-btn{overflow:hidden;position:relative}.format-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}.format-btn:hover:before{height:300px;width:300px}.progress-fill{animation:shimmer 2s infinite;background:linear-gradient(90deg,#667eea,#764ba2 50%,#667eea);background-size:200% 100%;transition:width .3s ease-out}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.upload-area.drag-active{animation:pulse 1s infinite}@keyframes pulse{0%,to{box-shadow:0 0 0 0 rgba(102,126,234,.7);transform:scale(1)}50%{box-shadow:0 0 0 10px rgba(102,126,234,0);transform:scale(1.02)}}.confetti-piece{animation:confetti-fall 3s linear forwards;background:#f0f;height:10px;position:fixed;top:-10px;width:10px;z-index:10000}@keyframes confetti-fall{to{opacity:0;transform:translateY(100vh) rotate(1turn)}}.spinner{animation:spin .8s linear infinite;border:4px solid hsla(0,0%,100%,.3);border-radius:50%;border-top-color:#fff;height:40px;width:40px}@keyframes spin{to{transform:rotate(1turn)}}.floating-icon{animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.slide-in-right{animation:slideInRight .5s cubic-bezier(.4,0,.2,1)}.bounce{animation:bounce .6s cubic-bezier(.68,-.55,.265,1.55)}@keyframes bounce{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.shake{animation:shake .5s}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}.glow{animation:glow 2s ease-in-out infinite}@keyframes glow{0%,to{box-shadow:0 0 5px rgba(102,126,234,.5)}50%{box-shadow:0 0 20px rgba(102,126,234,.8)}}.suggestion-panel{animation:slideUp .4s ease-out;background:rgba(102,126,234,.1);border:1px solid rgba(102,126,234,.3);border-radius:12px;margin:16px 0;padding:16px}.suggestion-panel h4{align-items:center;color:#667eea;display:flex;font-size:14px;gap:8px;margin:0 0 8px}.suggestion-panel p{color:hsla(0,0%,100%,.8);font-size:13px;margin:0}.suggestion-action{display:flex;gap:8px;margin-top:12px}.suggestion-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:13px;padding:8px 16px;transition:all .3s ease}.suggestion-btn:hover{box-shadow:0 4px 12px rgba(102,126,234,.4);transform:translateY(-2px)}.suggestion-btn.secondary{background:transparent;border:1px solid hsla(0,0%,100%,.3)}.template-grid{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:16px 0}.template-card{background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.1);border-radius:12px;cursor:pointer;padding:16px;transition:all .3s ease}.template-card:hover{background:hsla(0,0%,100%,.1);border-color:#667eea;box-shadow:0 8px 16px rgba(0,0,0,.2);transform:translateY(-4px)}.template-card h4{color:#fff;font-size:16px;margin:0 0 8px}.template-card p{color:hsla(0,0%,100%,.7);font-size:12px;margin:0}.template-badge{background:rgba(102,126,234,.3);border-radius:4px;display:inline-block;font-size:11px;margin-top:8px;padding:4px 8px}@media (max-width:768px){.template-grid{grid-template-columns:1fr}.template-card{padding:12px}}:focus-visible{outline:2px solid #667eea;outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (prefers-contrast:high){.card{border:2px solid #fff}.format-btn{border:2px solid}}.bento-grid{grid-gap:16px;animation:fadeIn .6s ease-out;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));padding:20px}.bento-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.1);border-radius:20px;overflow:hidden;padding:24px;position:relative;transition:all .4s cubic-bezier(.4,0,.2,1)}.bento-card:before{background:linear-gradient(90deg,#667eea,#764ba2,#f093fb);content:"";height:2px;left:0;position:absolute;right:0;top:0;transform:scaleX(0);transition:transform .4s ease}.bento-card:hover:before{transform:scaleX(1)}.bento-card:hover{background:hsla(0,0%,100%,.08);border-color:rgba(102,126,234,.5);box-shadow:0 20px 40px rgba(0,0,0,.3);transform:translateY(-8px)}.bento-card.large{grid-row:span 2}.bento-card.large,.bento-card.medium{grid-column:span 2}.neumorphic{background:#e0e5ec;border-radius:20px;box-shadow:9px 9px 16px rgba(163,177,198,.6),-9px -9px 16px hsla(0,0%,100%,.5);transition:all .3s ease}.neumorphic:hover{box-shadow:6px 6px 12px rgba(163,177,198,.6),-6px -6px 12px hsla(0,0%,100%,.5)}.neumorphic-pressed{box-shadow:inset 4px 4px 8px rgba(163,177,198,.6),inset -4px -4px 8px hsla(0,0%,100%,.5)}body.dark-mode .neumorphic{background:#2d3748;box-shadow:9px 9px 16px rgba(0,0,0,.4),-9px -9px 16px hsla(0,0%,100%,.05)}body.dark-mode .neumorphic:hover{box-shadow:6px 6px 12px rgba(0,0,0,.4),-6px -6px 12px hsla(0,0%,100%,.05)}.btn-ripple{overflow:hidden;position:relative}.btn-ripple:after{background:hsla(0,0%,100%,.5);border-radius:50%;content:"";height:0;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s;width:0}.btn-ripple:active:after{height:300px;width:300px}.magnetic-btn{transition:transform .2s ease}.magnetic-btn:hover{transform:scale(1.05)}@keyframes elastic{0%,to{transform:scale(1)}30%{transform:scale(1.25)}40%{transform:scale(.75)}50%{transform:scale(1.15)}65%{transform:scale(.95)}75%{transform:scale(1.05)}}.elastic{animation:elastic .8s}.glass-card{backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);border-radius:24px;box-shadow:0 8px 32px 0 rgba(31,38,135,.37),inset 0 1px 1px 0 hsla(0,0%,100%,.3);transition:all .3s ease}.glass-card:hover{background:hsla(0,0%,100%,.15);box-shadow:0 12px 48px 0 rgba(31,38,135,.5),inset 0 1px 1px 0 hsla(0,0%,100%,.4);transform:translateY(-4px)}.gradient-animated{animation:gradientShift 15s ease infinite;background:linear-gradient(-45deg,#667eea,#764ba2,#f093fb,#f5576c);background-size:400% 400%}@keyframes gradientShift{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.morph-shape{animation:morph 8s ease-in-out infinite;background:linear-gradient(45deg,#667eea,#764ba2);border-radius:60% 40% 30% 70%/60% 30% 70% 40%}@keyframes morph{0%,to{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%}}.parallax-layer{transition:transform .5s cubic-bezier(.4,0,.2,1)}.parallax-layer.slow{transform:translateY(calc(var(--scroll)*.5px))}.parallax-layer.medium{transform:translateY(calc(var(--scroll)*.3px))}.parallax-layer.fast{transform:translateY(calc(var(--scroll)*.1px))}.cursor-trail{animation:cursorFade 1s ease-out forwards;background:radial-gradient(circle,rgba(102,126,234,.5),transparent);border-radius:50%;height:20px;pointer-events:none;position:fixed;width:20px;z-index:9999}@keyframes cursorFade{to{opacity:0;transform:scale(2)}}.card-stack{position:relative}.card-stack .card:first-child{transform:translateY(0) scale(1);z-index:3}.card-stack .card:nth-child(2){opacity:.8;transform:translateY(8px) scale(.95);z-index:2}.card-stack .card:nth-child(3){opacity:.6;transform:translateY(16px) scale(.9);z-index:1}.skeleton{animation:skeleton-loading 1.5s ease-in-out infinite;background:linear-gradient(90deg,hsla(0,0%,100%,.05) 25%,hsla(0,0%,100%,.1) 50%,hsla(0,0%,100%,.05) 75%);background-size:200% 100%;border-radius:8px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.fab{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;bottom:24px;box-shadow:0 4px 12px rgba(102,126,234,.4);cursor:pointer;display:flex;height:56px;justify-content:center;position:fixed;right:24px;transition:all .3s cubic-bezier(.4,0,.2,1);width:56px;z-index:1000}.fab:hover{box-shadow:0 8px 24px rgba(102,126,234,.6);transform:scale(1.1) rotate(90deg)}.fab:before{background:rgba(0,0,0,.9);border-radius:8px;color:#fff;content:attr(data-tooltip);font-size:14px;opacity:0;padding:8px 12px;pointer-events:none;position:absolute;right:70px;transition:opacity .3s;white-space:nowrap}.fab:hover:before{opacity:1}.scroll-progress{background:linear-gradient(90deg,#667eea,#764ba2,#f093fb);height:4px;left:0;position:fixed;top:0;transform-origin:left;transition:transform .1s ease-out;z-index:9999}.toast{align-items:center;animation:toastSlideIn .4s cubic-bezier(.4,0,.2,1) forwards;background:rgba(0,0,0,.9);border-radius:12px;bottom:24px;box-shadow:0 8px 32px rgba(0,0,0,.4);color:#fff;display:flex;gap:12px;left:50%;padding:16px 24px;position:fixed;transform:translateX(-50%) translateY(100px);z-index:10000}@keyframes toastSlideIn{to{transform:translateX(-50%) translateY(0)}}.toast.success{background:linear-gradient(135deg,#43e97b,#38f9d7);color:#1a1a1a}.toast.error{background:linear-gradient(135deg,#f5576c,#f093fb)}.toast.info{background:linear-gradient(135deg,#667eea,#764ba2)}.badge{animation:badgePulse 2s ease-in-out infinite;border-radius:12px;display:inline-block;font-size:12px;font-weight:600;padding:4px 12px}@keyframes badgePulse{0%,to{box-shadow:0 0 0 0 rgba(102,126,234,.7);transform:scale(1)}50%{box-shadow:0 0 0 8px rgba(102,126,234,0);transform:scale(1.05)}}.split-screen{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}.split-screen .left{animation:slideInLeft .8s ease-out;background:linear-gradient(135deg,#667eea,#764ba2)}.split-screen .right{animation:slideInRight .8s ease-out;background:linear-gradient(135deg,#f093fb,#f5576c)}@keyframes slideInLeft{0%{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes slideInRight{0%{transform:translateX(100%)}to{transform:translateX(0)}}@media (max-width:768px){.bento-grid{gap:12px;grid-template-columns:1fr;padding:12px}.bento-card.large,.bento-card.medium{grid-column:span 1;grid-row:span 1}.fab{bottom:16px;height:48px;right:16px;width:48px}.split-screen{grid-template-columns:1fr}}.file-uploader{background:#fff;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.1);padding:24px}.file-uploader h2{color:#333;font-size:1.3rem;margin-bottom:16px}.dropzone{background:#f8f9ff;border:2px dashed #667eea;border-radius:12px;cursor:pointer;padding:40px 20px;text-align:center;transition:all .3s ease}.dropzone:hover{background:#f0f2ff;border-color:#764ba2}.dropzone.active{background:#e8ebff;border-color:#764ba2;transform:scale(1.02)}.dropzone-content{align-items:center;color:#667eea;display:flex;flex-direction:column;gap:8px}.dropzone-content svg{opacity:.8}.dropzone-primary{color:#333;font-weight:600;margin:0}.dropzone-secondary{color:#666;font-size:.9rem;margin:0}.dropzone-note{color:#999;font-size:.8rem;margin:8px 0 0}.file-info{align-items:center;background:#f8f9fa;border-radius:12px;display:flex;justify-content:space-between;margin-top:20px;padding:16px}.file-details{display:flex;flex:1 1;gap:12px}.file-details svg{color:#667eea;flex-shrink:0}.file-name{margin:0}.file-size{color:#666;font-size:.85rem;margin:4px 0 0}.file-type{color:#999;font-size:.75rem;margin:4px 0 0}.clear-btn{align-items:center;background:#ff6b6b;border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;flex-shrink:0;justify-content:center;padding:8px;transition:all .3s ease}.clear-btn:hover{background:#ff5252;transform:scale(1.1)}.supported-formats{border-top:1px solid #eee;margin-top:24px;padding-top:24px}.supported-formats h3{color:#333;font-size:1rem;margin:0 0 12px}.format-grid{display:flex;flex-wrap:wrap;gap:8px}.format-badge{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;color:#fff;display:inline-block;font-size:.8rem;font-weight:600;padding:6px 12px}.conversion-panel{color:#fff}.conversion-panel h2{color:#fff;font-size:1.5rem;font-weight:700;margin-bottom:20px}.mode-toggle{background:hsla(0,0%,100%,.1);border-radius:12px;display:flex;gap:10px;margin-bottom:24px;padding:4px}.mode-toggle button{background:transparent;border:none;border-radius:8px;color:hsla(0,0%,100%,.7);cursor:pointer;flex:1 1;font-size:.9rem;font-weight:600;padding:10px 16px;transition:all .3s ease}.mode-toggle button.active{background:linear-gradient(135deg,#f093fb,#f5576c);box-shadow:0 2px 8px rgba(245,87,108,.4);color:#fff}.mode-toggle button:hover:not(.active){background:hsla(0,0%,100%,.15);color:#fff}.conversion-section{margin-bottom:24px}.section-label{color:hsla(0,0%,100%,.95);display:block;font-size:1rem;font-weight:600;margin-bottom:12px}.quality-value{color:#fbbf24;font-weight:700}.format-select-grid{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(80px,1fr))}.format-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:hsla(0,0%,100%,.1);border:2px solid hsla(0,0%,100%,.3);border-radius:12px;color:#fff;cursor:pointer;font-size:.9rem;font-weight:600;padding:12px 8px;transition:all .3s cubic-bezier(.4,0,.2,1)}.format-btn:hover:not(:disabled){background:hsla(0,0%,100%,.2);border-color:hsla(0,0%,100%,.6);box-shadow:0 4px 12px rgba(0,0,0,.2);transform:translateY(-2px)}.format-btn.active{background:linear-gradient(135deg,#f093fb,#f5576c);border-color:hsla(0,0%,100%,.5);box-shadow:0 4px 15px rgba(245,87,108,.4);color:#fff}.format-btn:disabled{cursor:not-allowed;opacity:.5}.no-formats{color:hsla(0,0%,100%,.7);font-size:.95rem;font-style:italic;grid-column:1/-1;padding:30px 20px;text-align:center}.quality-slider{-webkit-appearance:none;appearance:none;background:hsla(0,0%,100%,.2);border-radius:4px;cursor:pointer;height:8px;outline:none;width:100%}.quality-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:linear-gradient(135deg,#f093fb,#f5576c);border-radius:50%;box-shadow:0 2px 10px rgba(245,87,108,.5);cursor:pointer;height:24px;-webkit-transition:all .3s ease;transition:all .3s ease;width:24px}.quality-slider::-webkit-slider-thumb:hover{box-shadow:0 4px 15px rgba(245,87,108,.7);transform:scale(1.1)}.quality-slider::-moz-range-thumb{background:linear-gradient(135deg,#f093fb,#f5576c);border:none;border-radius:50%;box-shadow:0 2px 10px rgba(245,87,108,.5);cursor:pointer;height:24px;width:24px}.quality-info{color:hsla(0,0%,100%,.7);display:flex;font-size:.8rem;justify-content:space-between;margin-top:8px}.progress-section{margin-bottom:20px}.progress-bar{background:hsla(0,0%,100%,.2);border-radius:4px;height:8px;margin-bottom:8px;overflow:hidden;width:100%}.progress-fill{background:linear-gradient(90deg,#f093fb,#f5576c);border-radius:4px;box-shadow:0 0 10px rgba(245,87,108,.5);height:100%;transition:width .3s ease}.progress-text{color:hsla(0,0%,100%,.9);font-size:.85rem;margin:0;text-align:center}.convert-btn{align-items:center;background:#fff;border:3px solid hsla(0,0%,100%,.3);border-radius:12px;box-shadow:0 8px 25px hsla(0,0%,100%,.4),0 0 0 1px rgba(102,126,234,.2);color:#667eea;cursor:pointer;display:flex;font-size:1.1rem;font-weight:800;gap:10px;justify-content:center;letter-spacing:1px;margin-bottom:20px;overflow:hidden;padding:16px;position:relative;text-transform:uppercase;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}.convert-btn:not(:disabled){animation:readyPulse 2s ease-in-out infinite}@keyframes readyPulse{0%,to{box-shadow:0 8px 25px hsla(0,0%,100%,.4),0 0 0 1px rgba(102,126,234,.2)}50%{box-shadow:0 8px 35px hsla(0,0%,100%,.7),0 0 0 3px rgba(102,126,234,.5),0 0 20px rgba(102,126,234,.3)}}.convert-btn:before{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.3),transparent);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s;width:100%}.convert-btn:hover:not(:disabled):before{left:100%}.convert-btn:hover:not(:disabled){background:linear-gradient(135deg,#fff,#f0f0ff);box-shadow:0 12px 35px hsla(0,0%,100%,.6),0 0 0 2px rgba(102,126,234,.4);color:#5a5fcf;transform:translateY(-3px) scale(1.02)}.convert-btn:active:not(:disabled){transform:translateY(-1px)}.convert-btn:disabled{background:#fff;color:#667eea;cursor:not-allowed;filter:grayscale(20%);opacity:1;transform:none}.info-box{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:hsla(0,0%,100%,.1);border-left:4px solid #f5576c;border-radius:12px;padding:18px}.info-box h4{color:#fff;font-size:1rem;font-weight:700;margin:0 0 12px}.info-box ul{list-style:none;margin:0;padding:0}.info-box li{color:hsla(0,0%,100%,.9);font-size:.9rem;line-height:1.5;padding:6px 0}@media (max-width:480px){.format-select-grid{gap:8px;grid-template-columns:repeat(auto-fit,minmax(70px,1fr))}.format-btn{font-size:.85rem;padding:10px 6px}.convert-btn{font-size:1rem;padding:14px}}.history-panel{background:#fff;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.1);padding:24px}.history-panel h2{color:#333;font-size:1.3rem;margin-bottom:16px}.history-panel-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.clear-all-btn{background:rgba(255,59,48,.2);border:1px solid rgba(255,59,48,.5);border-radius:8px;color:#ff3b30;cursor:pointer;font-size:14px;padding:8px 16px;transition:all .2s ease}.clear-all-btn:hover{background:rgba(255,59,48,.3);transform:translateY(-1px)}.empty-state{color:#999;padding:40px 20px;text-align:center}.empty-state p{font-size:1rem;margin:0}.empty-subtext{font-size:.85rem;margin-top:8px!important;opacity:.7}.history-list{display:flex;flex-direction:column;gap:12px}.history-item{border:1px solid #eee;border-radius:12px;overflow:hidden;transition:all .3s ease}.history-item:hover{border-color:#667eea;box-shadow:0 4px 12px rgba(102,126,234,.1)}.history-header{align-items:center;background:#f8f9fa;cursor:pointer;display:flex;gap:12px;justify-content:space-between;padding:16px;transition:background .3s ease}.history-header:hover{background:#f0f2f5}.history-info{align-items:center;display:flex;flex:1 1;gap:12px;min-width:0}.status-badge{border-radius:20px;display:inline-block;font-size:.75rem;font-weight:600;padding:4px 12px;white-space:nowrap}.status-badge.completed{background:#d4edda;color:#155724}.file-name{color:#333;flex:1 1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.arrow{color:#999;flex-shrink:0}.output-format{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:4px;color:#fff;flex-shrink:0;font-size:.75rem;font-weight:600;padding:4px 8px}.history-time{color:#999;flex-shrink:0;font-size:.85rem;white-space:nowrap}.expand-icon{color:#667eea;flex-shrink:0;transition:transform .3s ease}.expand-icon.expanded{transform:rotate(180deg)}.history-details{animation:slideDown .3s ease;background:#fff;border-top:1px solid #eee;padding:20px}@keyframes slideDown{0%{max-height:0;opacity:0}to{max-height:1000px;opacity:1}}.details-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:16px}.detail-section{background:#f8f9fa;border-radius:8px;padding:12px}.detail-section h4{color:#333;font-size:.9rem;font-weight:600;margin:0 0 8px}.metrics{display:flex;flex-direction:column;gap:6px}.metric{display:flex;font-size:.85rem;justify-content:space-between}.metric-key{color:#666}.metric-value{color:#667eea;font-weight:600}.recipe-note{color:#666;font-size:.85rem;margin:0}.action-buttons{display:flex;flex-wrap:wrap;gap:8px}.action-btn{align-items:center;background:#fff;border:1px solid #ddd;border-radius:6px;color:#666;cursor:pointer;display:flex;flex:1 1;font-size:.85rem;font-weight:600;gap:6px;min-width:120px;padding:8px 12px;transition:all .3s ease}.action-btn:hover{background:#f8f9ff;border-color:#667eea;color:#667eea}.download-btn:hover{border-color:#28a745;color:#28a745}.view-recipe-btn:hover{border-color:#007bff;color:#007bff}.delete-btn:hover{border-color:#dc3545;color:#dc3545}@media (max-width:768px){.history-header{align-items:flex-start;flex-direction:column}.history-info{flex-wrap:wrap;width:100%}.action-btn{flex-basis:calc(50% - 4px);flex-grow:1;flex-shrink:1}}.health-check{align-items:center;animation:slideIn .3s ease;border-radius:8px;display:flex;font-size:.9rem;font-weight:600;gap:8px;padding:10px 16px;position:fixed;right:20px;top:20px;z-index:1000}@keyframes slideIn{0%{opacity:0;transform:translateX(400px)}to{opacity:1;transform:translateX(0)}}.health-check.connected{background:rgba(40,167,69,.1);border:1px solid #28a745;color:#28a745}.health-check.disconnected{background:rgba(220,53,69,.1);border:1px solid #dc3545;color:#dc3545}.health-check.checking{background:rgba(255,193,7,.1);border:1px solid #ffc107;color:#ffc107}@media (max-width:768px){.health-check{font-size:.8rem;padding:8px 12px;right:10px;top:10px}}.feedback-widget{bottom:24px;font-family:Inter,system-ui,sans-serif;position:fixed;right:24px;z-index:1000}.feedback-toggle{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:24px;box-shadow:0 4px 14px rgba(102,126,234,.4);color:#fff;cursor:pointer;display:flex;gap:10px;height:48px;justify-content:center;padding:0 20px;transition:all .2s cubic-bezier(.175,.885,.32,1.275)}.feedback-toggle:hover{box-shadow:0 6px 20px rgba(102,126,234,.6);transform:translateY(-2px)}.feedback-label{font-size:14px;font-weight:600}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.feedback-form-container{animation:slideUp .3s ease-out forwards;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:hsla(0,0%,100%,.95);border:1px solid hsla(0,0%,100%,.2);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.12);display:flex;flex-direction:column;overflow:hidden;width:320px}.dark-mode .feedback-form-container{background:rgba(30,30,30,.95);border:1px solid hsla(0,0%,100%,.08);color:#fff}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.feedback-header{align-items:center;background:linear-gradient(135deg,rgba(102,126,234,.1),rgba(118,75,162,.1));border-bottom:1px solid rgba(0,0,0,.05);display:flex;justify-content:space-between;padding:16px}.feedback-header h3{color:#4a5568;font-size:16px;font-weight:600;margin:0}.dark-mode .feedback-header h3{color:#e2e8f0}.close-btn{background:none;border:none;border-radius:50%;color:#a0aec0;cursor:pointer;padding:4px;transition:all .2s}.close-btn:hover{background:rgba(0,0,0,.05);color:#4a5568}.feedback-form-container form{display:flex;flex-direction:column;gap:12px;padding:16px}.feedback-type-selector{background:rgba(0,0,0,.03);border-radius:8px;display:flex;gap:8px;padding:4px}.dark-mode .feedback-type-selector{background:hsla(0,0%,100%,.05)}.feedback-type-selector button{background:none;border:none;border-radius:6px;color:#718096;cursor:pointer;flex:1 1;font-size:12px;font-weight:500;padding:6px;transition:all .2s}.dark-mode .feedback-type-selector button{color:#a0aec0}.feedback-type-selector button.active{background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.05);color:#667eea}.dark-mode .feedback-type-selector button.active{background:#4a5568;color:#fff}input[type=email],textarea{background:#fff;border:1px solid #e2e8f0;border-radius:8px;font-family:inherit;font-size:14px;outline:none;padding:10px;resize:vertical;transition:border-color .2s;width:100%}.dark-mode input[type=email],.dark-mode textarea{background:#2d3748;border-color:#4a5568;color:#fff}input[type=email]:focus,textarea:focus{border-color:#667eea;box-shadow:0 0 0 2px rgba(102,126,234,.1)}.submit-btn{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-weight:600;gap:8px;justify-content:center;padding:10px;transition:opacity .2s}.submit-btn:disabled{cursor:not-allowed;opacity:.7}.submit-btn:hover:not(:disabled){opacity:.9}.feedback-success{align-items:center;color:#4a5568;display:flex;flex-direction:column;gap:12px;padding:40px 20px;text-align:center}.dark-mode .feedback-success{color:#e2e8f0}.error-msg{color:#e53e3e;font-size:12px;gap:4px;margin:0}.error-msg,.help-modal-overlay{align-items:center;display:flex}.help-modal-overlay{animation:fadeIn .2s ease-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:rgba(0,0,0,.5);bottom:0;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:2000}.help-modal{animation:scaleUp .3s cubic-bezier(.16,1,.3,1);background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.2);display:flex;flex-direction:column;height:80vh;max-width:800px;overflow:hidden;width:90%}.dark-mode .help-modal{background:#1e1e2f;color:#fff}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleUp{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.help-header{align-items:center;background:#f8fafc;border-bottom:1px solid #eee;display:flex;justify-content:space-between;padding:20px 24px}.dark-mode .help-header{background:#2d2d44;border-color:#3f3f5f}.help-header h2{color:#334155;font-size:20px;margin:0}.dark-mode .help-header h2{color:#f1f5f9}.help-body{display:flex;flex:1 1;overflow:hidden}.help-sidebar{background:#f8fafc;border-right:1px solid #eee;display:flex;flex-direction:column;gap:16px;padding:16px;width:250px}.dark-mode .help-sidebar{background:#232336;border-color:#3f3f5f}.help-search{align-items:center;display:flex;position:relative}.help-search svg{color:#94a3b8;left:10px;position:absolute}.help-search input{border:1px solid #e2e8f0;border-radius:8px;font-size:14px;outline:none;padding:8px 12px 8px 36px;width:100%}.dark-mode .help-search input{background:#2d2d44;border-color:#4b4b6a;color:#fff}.help-nav{display:flex;flex-direction:column;gap:4px}.nav-item{align-items:center;background:none;border:none;border-radius:8px;color:#64748b;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:10px;padding:10px 12px;text-align:left;transition:all .2s}.nav-item:hover{background:#e2e8f0;color:#334155}.dark-mode .nav-item:hover{background:#3f3f5f;color:#f1f5f9}.nav-item.active{background:#e0e7ff;color:#4f46e5}.dark-mode .nav-item.active{background:#4f46e5;color:#fff}.help-content{flex:1 1;overflow-y:auto;padding:32px}.help-content h3{border-bottom:2px solid #f1f5f9;font-size:24px;margin-bottom:24px;margin-top:0;padding-bottom:12px}.dark-mode .help-content h3{border-color:#3f3f5f}.help-items{display:flex;flex-direction:column;gap:24px}.help-item h4{color:#4f46e5;font-size:16px;margin:0 0 8px}.dark-mode .help-item h4{color:#818cf8}.help-item p{color:#475569;line-height:1.6;margin:0}.dark-mode .help-item p{color:#cbd5e1}.no-results{color:#94a3b8;margin-top:40px;text-align:center}@media (max-width:640px){.help-body{flex-direction:column}.help-sidebar{border-bottom:1px solid #eee;border-right:none;height:auto;width:100%}.help-nav{flex-direction:row;overflow-x:auto;padding-bottom:4px}.nav-item span{display:none}}.cube-container{height:60px;margin:0 auto 30px;perspective:600px;width:60px}.cube{animation:rotateCube 12s linear infinite;height:100%;position:relative;transform-style:preserve-3d;width:100%}.face{align-items:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);-webkit-backface-visibility:visible;backface-visibility:visible;background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);box-shadow:0 0 15px rgba(102,126,234,.3);color:#fff;display:flex;flex-direction:column;font-size:10px;font-weight:700;height:60px;justify-content:center;position:absolute;width:60px}.face span{margin-top:2px}.front{transform:rotateY(0deg) translateZ(30px)}.right{transform:rotateY(90deg) translateZ(30px)}.back{transform:rotateY(180deg) translateZ(30px)}.left{transform:rotateY(-90deg) translateZ(30px)}.top{transform:rotateX(90deg) translateZ(30px)}.bottom{transform:rotateX(-90deg) translateZ(30px)}@keyframes rotateCube{0%{transform:rotateX(0deg) rotateY(0deg)}to{transform:rotateX(1turn) rotateY(1turn)}}
/*# sourceMappingURL=main.8007d2c5.css.map*/