body{margin:0;padding:0;box-sizing:border-box;background:#0a0a0a;-webkit-user-select:none;user-select:none}*{box-sizing:inherit}.app-container{width:100%;padding:20px;font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e 50%,#0f3460);min-height:100vh;box-sizing:border-box}.app-title{text-align:center;color:#fff;font-size:2.5rem;margin-bottom:30px;text-shadow:2px 2px 4px rgba(0,0,0,.5);font-weight:300}.main-content{max-width:1200px;margin:0 auto;background:#1e1e1e;border-radius:15px;padding:30px;box-shadow:0 20px 40px rgba(0,0,0,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #333}.upload-section{margin-bottom:25px;padding-bottom:20px;border-bottom:1px solid #333}.content-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:30px;gap:30px;margin-bottom:25px;align-items:start}.content-grid .section{margin-bottom:0;padding-bottom:0;border-bottom:none}.preview-section{display:flex;flex-direction:column;height:100%}.section{margin-bottom:25px;padding-bottom:20px;border-bottom:1px solid #333}.section:last-child{border-bottom:none;margin-bottom:0}.section-title{font-size:1.2rem;color:#fff;margin-bottom:15px;font-weight:600}.upload-container{text-align:center}.content-grid .upload-container{text-align:left}.file-input-wrapper{position:relative;display:inline-block;cursor:pointer;background:linear-gradient(45deg,#667eea,#764ba2);color:#fff;padding:20px 40px;border-radius:50px;font-weight:600;transition:all .3s ease;box-shadow:0 4px 15px rgba(102,126,234,.4);font-size:1.1rem}.file-input-wrapper:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(102,126,234,.5)}.file-input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer}.upload-icon{margin-right:10px;font-size:1.2em}.error-message{color:#ff6b6b;margin-top:15px;padding:15px;background:#2d1b1b;border-radius:8px;border:1px solid #4a2c2c}.preview-container{display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;background:#2a2a2a;border-radius:10px;border:1px solid #444;height:100%;min-height:400px}.preview-image{max-width:100%;max-height:100%}.preview-image:hover{transform:scale(1.02)}.no-image-text{color:#888;font-style:italic;padding:40px;background:#2a2a2a;border-radius:10px;border:2px dashed #444}.download-section-inline{margin-top:30px;padding-top:25px;border-top:1px solid #333}.download-section-inline .section-title{margin-bottom:15px}.download-section{grid-column:1/-1;margin-top:20px;padding-top:20px;border-top:1px solid #333}.download-container,.download-section-inline .download-container{text-align:left}.size-preview{margin-bottom:25px;padding:25px;background:#2a2a2a;border-radius:12px;border:1px solid #444}.size-preview h3{margin:0 0 20px;color:#fff;font-size:1.2rem}.size-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));grid-gap:12px;gap:12px;margin-top:15px}.size-item{background:#333;padding:12px 16px;font-size:1rem;font-weight:500;border:1px solid #555;transition:all .2s ease}.size-item:hover{background:#404040;border-color:#667eea;transform:translateY(-1px)}.size-item.selected{background:#667eea;border-color:#764ba2;color:#fff;transform:translateY(-1px);box-shadow:0 2px 8px rgba(102,126,234,.3)}.download-button{background:linear-gradient(45deg,#2ecc71,#27ae60);color:#fff;border:none;padding:18px 45px;border-radius:50px;font-size:1.2rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px rgba(46,204,113,.4);display:inline-flex;align-items:center;grid-gap:12px;gap:12px;width:100%;justify-content:center}.download-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px rgba(46,204,113,.5)}.download-button:disabled{background:#555;cursor:not-allowed;transform:none;box-shadow:none;color:#888}.download-icon{font-size:1.3em}.preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding:10px 0}.preview-size-label{background:#333;color:#fff;padding:8px 16px;border-radius:20px;font-size:.9rem;font-weight:500;border:1px solid #555}.preview-header .back-to-original-button{background:linear-gradient(45deg,#9b59b6,#8e44ad);color:#fff;border:none;padding:8px 16px;border-radius:20px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px rgba(155,89,182,.3);display:inline-flex;align-items:center;grid-gap:6px;gap:6px;white-space:nowrap}.preview-header .back-to-original-button:hover{transform:translateY(-1px);box-shadow:0 3px 12px rgba(155,89,182,.4);background:linear-gradient(45deg,#8e44ad,#7d3c98)}.download-container .back-to-original-button{display:none}.main-download-toggle{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:6px;gap:6px;margin-bottom:20px;background:#333;padding:4px;border-radius:12px;border:1px solid #555}.main-toggle-button{padding:10px 8px;border:none;border-radius:8px;background:transparent;color:#ccc;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;grid-gap:4px;gap:4px;text-align:center;line-height:1.2}.main-toggle-button:hover{background:#404040;color:#fff}.main-toggle-button.active{background:linear-gradient(45deg,#667eea,#764ba2);color:#fff;box-shadow:0 2px 8px rgba(102,126,234,.3);transform:translateY(-1px)}.size-item{background:#444;color:#fff;border:2px solid #555;border-radius:8px;padding:12px 8px;cursor:pointer;transition:all .3s ease;font-weight:600;text-align:center;font-size:.9rem;display:flex;flex-direction:column;align-items:center;justify-content:center;grid-gap:4px;gap:4px;min-height:60px}.size-item:hover{background:#555;border-color:#777;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.3)}.size-item.selected{background:linear-gradient(45deg,#2ecc71,#27ae60);border-color:#27ae60;box-shadow:0 4px 15px rgba(46,204,113,.4);transform:translateY(-2px)}.size-name{font-size:.7rem;color:#ccc;font-weight:400;opacity:.8;margin-top:2px}.size-item.selected .size-name{color:#fff;opacity:1}@media (max-width:1024px){.content-grid{grid-template-columns:1fr;grid-gap:20px;gap:20px}.size-grid{grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}}@media (max-width:768px){.app-container{padding:15px}.app-title{font-size:2rem}.main-content{padding:20px}.download-button,.file-input-wrapper{padding:15px 30px;font-size:1rem}.size-grid{grid-template-columns:repeat(auto-fit,minmax(80px,1fr));grid-gap:10px;gap:10px}.size-item{background:#444;color:#fff;border:2px solid #555;border-radius:8px;padding:12px 8px;cursor:pointer;transition:all .3s ease;font-weight:600;text-align:center;font-size:.9rem;display:flex;flex-direction:column;align-items:center;justify-content:center;grid-gap:4px;gap:4px;min-height:60px}.custom-inputs{flex-direction:column;align-items:stretch}.input-separator{text-align:center}.custom-input{min-width:auto}}@media (max-width:480px){.size-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.custom-inputs{flex-direction:column;align-items:stretch}.input-separator{text-align:center}.custom-input{min-width:auto}.download-mode-toggle{flex-direction:column}.mode-button{padding:12px}}.upscale-quality-section{margin-bottom:20px;padding:15px 20px;background:#2a2a2a;border-radius:12px;border:1px solid #444}.upscale-quality-section h4{margin:0 0 12px;color:#fff;font-size:1rem;font-weight:600}.quality-buttons{display:flex;grid-gap:8px;gap:8px;margin-bottom:8px}.quality-button{flex:1 1;padding:8px 12px;border-radius:8px;background:#333;color:#ccc;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .3s ease;border:1px solid #555}.quality-button:hover{background:#404040;color:#fff}.quality-button.active{background:linear-gradient(45deg,#f39c12,#e67e22);color:#fff;border-color:#e67e22;box-shadow:0 2px 8px rgba(243,156,18,.3)}.quality-info{text-align:center}.quality-info small{color:#888;font-size:.75rem;background:#333;padding:4px 8px;border-radius:10px;border:1px solid #555}.custom-container{margin-bottom:25px;padding:25px;background:#2a2a2a;border-radius:12px;border:1px solid #444}.custom-form{margin:0;padding:0;border:none}.custom-container h3{margin:0 0 15px;color:#fff;font-size:1.1rem}.aspect-ratio-button{background:linear-gradient(45deg,#e74c3c,#c0392b);color:#fff;border:none;padding:12px 16px;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px rgba(231,76,60,.3);display:inline-flex;align-items:center;grid-gap:6px;gap:6px}.aspect-ratio-button:hover{transform:translateY(-1px);box-shadow:0 3px 12px rgba(231,76,60,.4)}.aspect-ratio-button.locked{background:linear-gradient(45deg,#27ae60,#229954);box-shadow:0 2px 8px rgba(39,174,96,.3)}.aspect-ratio-button.locked:hover{box-shadow:0 3px 12px rgba(39,174,96,.4)}.aspect-ratio-info{margin-top:8px;text-align:center}.aspect-ratio-info small{color:#888;font-size:.75rem;background:#333;padding:4px 8px;border-radius:10px;border:1px solid #555}.custom-inputs{grid-gap:15px;gap:15px}.custom-input{background:#333;border:1px solid #555;border-radius:8px;padding:12px 16px;color:#fff;font-size:1rem;font-weight:500;width:120px;text-align:center;transition:all .3s ease}.custom-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 2px rgba(102,126,234,.2)}.custom-input::placeholder{color:#888}.custom-input.no-arrows::-webkit-inner-spin-button,.custom-input.no-arrows::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.custom-input.no-arrows[type=number]{-moz-appearance:textfield}.input-separator{color:#fff;font-size:1.2rem;font-weight:700}.main-toggle-button:nth-child(2).active{background:linear-gradient(45deg,#4caf50,#45a049);box-shadow:0 2px 8px rgba(76,175,80,.3)}.main-toggle-button:nth-child(3).active{background:linear-gradient(45deg,#007aff,#0056d6);box-shadow:0 2px 8px rgba(0,122,255,.3)}.main-toggle-button:nth-child(4).active{background:linear-gradient(45deg,#ff6b6b,#ee5a24);box-shadow:0 2px 8px hsla(0,100%,71%,.3)}@media (max-width:768px){.main-download-toggle{grid-template-columns:repeat(2,1fr);grid-gap:8px;gap:8px}.main-toggle-button{padding:12px 8px;font-size:.8rem}.quality-buttons{flex-direction:column}.quality-button{padding:10px 12px}.aspect-ratio-button{width:100%;justify-content:center;padding:10px 16px}.custom-inputs{flex-direction:column;align-items:stretch}.input-separator{text-align:center;margin:8px 0}.custom-input{min-width:auto;width:100%}}@media (max-width:480px){.main-download-toggle{grid-template-columns:1fr}.main-toggle-button{padding:15px;font-size:.9rem}.size-item{min-height:50px;padding:10px 6px}.size-name{font-size:.65rem}.upscale-quality-section{padding:12px 15px}.custom-container{padding:15px}}.app-footer{max-width:1200px;margin:20px auto 0;padding:20px;border:1px solid #333;border-radius:15px;background:rgba(30,30,30,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.footer-content{width:100%;color:#ccc}.footer-content p{margin:0 0 20px;font-size:1rem;font-weight:500;text-align:center}.footer-content strong{color:#fff;background:linear-gradient(45deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.footer-bottom{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;grid-gap:20px;gap:20px;min-height:50px}.footer-left{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;grid-gap:15px;gap:15px}.footer-left p{margin:0;font-size:1rem;font-weight:500;text-align:left}.footer-left strong{color:#fff;background:linear-gradient(45deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.footer-right{justify-content:flex-end}.footer-right,.footer-tech{display:flex;align-items:center}.footer-tech{justify-content:center;grid-gap:15px;gap:15px}.tech-link{display:flex;align-items:center;grid-gap:8px;gap:8px;padding:8px 16px;color:#ccc;text-decoration:none;border-radius:25px;border:1px solid #444;background:hsla(0,0%,100%,.05);transition:all .3s ease;font-size:.9rem;font-weight:500}.tech-link:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.3);border-color:#666}.tech-link.react:hover{background:rgba(97,218,251,.1);color:#61dafb;border-color:#61dafb}.tech-link.typescript:hover{background:rgba(49,120,198,.1);color:#3178c6;border-color:#3178c6}.tech-link svg{transition:transform .3s ease}.tech-link:hover svg{transform:scale(1.1)}.footer-social{grid-gap:12px;gap:12px}.footer-social,.social-link{display:flex;align-items:center}.social-link{grid-gap:8px;gap:8px;padding:8px 16px;color:#ccc;text-decoration:none;border-radius:25px;border:1px solid #444;background:hsla(0,0%,100%,.05);transition:all .3s ease;font-size:.9rem;font-weight:500}.social-link:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.3);border-color:#666}.social-link.github:hover{background:hsla(0,0%,100%,.1);color:#fff}.social-link.linkedin:hover{background:rgba(0,119,181,.1);color:#0077b5;border-color:#0077b5}.social-link svg{transition:transform .3s ease}.social-link:hover svg{transform:scale(1.1)}.footer-year{font-weight:500;color:#888;font-size:.9rem;padding:8px 12px;background:hsla(0,0%,100%,.05);border:1px solid #444;border-radius:20px;white-space:nowrap}@media (max-width:768px){.app-footer{margin-top:30px;padding:20px 15px}.footer-content p{font-size:.9rem;margin-bottom:15px}.footer-bottom{grid-template-columns:1fr;grid-gap:15px;gap:15px;text-align:center}.footer-center,.footer-left,.footer-right{justify-content:center}.footer-social,.footer-tech{grid-gap:12px;gap:12px}.social-link,.tech-link{padding:6px 12px;font-size:.85rem;grid-gap:6px;gap:6px}.social-link svg,.tech-link svg{width:18px;height:18px}}@media (max-width:480px){.footer-content p{font-size:.85rem;margin-bottom:12px}.footer-social,.footer-tech{flex-wrap:wrap;justify-content:center;grid-gap:8px;gap:8px}.social-link,.tech-link{padding:8px 12px;font-size:.8rem}.footer-year{font-size:.8rem;padding:6px 10px}}.custom-controls-row{display:flex;align-items:center;grid-gap:20px;gap:20px;margin-bottom:15px}.custom-inputs{flex:1 1;display:flex;align-items:center;grid-gap:10px;gap:10px}@media (max-width:768px){.custom-controls-row{flex-direction:column;align-items:stretch;grid-gap:15px;gap:15px}.custom-inputs{justify-content:center}.aspect-ratio-toggle{align-self:center}}
/*# sourceMappingURL=main.c54fc3f3.chunk.css.map */