:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.image-spin-blur{width:100%;height:100%;padding:20px;position:relative;display:flex;align-items:center;justify-content:center}.upload-area{border:2px dashed #5f6368;border-radius:12px;padding:60px 40px;text-align:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);background:#202124;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 2px 8px #00000026}.upload-area:before{content:"";position:absolute;inset:0;background:#ffffff05;pointer-events:none}.upload-area:hover{border-color:#1976d2;background:#2d2e30;transform:translateY(-1px);box-shadow:0 4px 12px #0003}.upload-content{max-width:350px;color:#e8eaed}.upload-icon{width:80px;height:80px;background:#1976d2;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 30px;font-size:2rem;color:#fff;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.upload-area h3{color:#e8eaed;margin-bottom:15px;font-weight:500;font-size:1.8rem}.upload-area p{color:#9aa0a6;margin-bottom:10px;font-size:1rem;line-height:1.5}.upload-formats{font-size:.875rem;color:#5f6368}.file-input{display:none}.editor-container{display:flex;gap:20px;margin-top:20px;flex-wrap:wrap}@media(max-width:1200px){.editor-container{flex-direction:column}}.sidebar{display:flex;flex-direction:column;gap:20px;min-width:300px;flex-shrink:0}.image-list{background:#202124;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:12px;padding:20px;box-shadow:0 1px 3px #0000004d;border:1px solid #3c4043;position:relative;overflow:hidden}.image-list:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#667eea05,#764ba205);pointer-events:none}.image-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #3c4043;position:relative;z-index:1}.image-list-header h3{margin:0;color:#e8eaed;font-weight:500}.btn-small{padding:6px 12px;font-size:12px;border:none;border-radius:6px;background:#1976d2;color:#fff;cursor:pointer;font-weight:500;transition:all .2s ease}.btn-small:hover{background:#1565c0;transform:translateY(-1px)}.image-thumbnails{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto}.thumbnail{position:relative;display:flex;align-items:center;gap:12px;padding:8px;border-radius:8px;cursor:pointer;transition:all .2s ease;border:1px solid transparent}.thumbnail:hover{background:#2d2e30}.thumbnail.selected{background:#1976d21f;border-color:#1976d2}.thumbnail img{width:40px;height:40px;object-fit:cover;border-radius:4px;border:1px solid #5f6368}.thumbnail-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.thumbnail-name{font-size:12px;font-weight:500;color:#e8eaed;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.processed-badge{font-size:10px;color:#4caf50;font-weight:600}.remove-btn{position:absolute;top:4px;right:4px;width:30px;height:30px;border:none;border-radius:50%;background:#d32f2f;color:#fff;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .2s ease}.thumbnail:hover .remove-btn{opacity:1}.remove-btn:hover{background:#c62828;transform:scale(1.1)}.main-content{display:flex;flex-direction:column;flex:1;min-width:600px}.loading-overlay{position:fixed;inset:0;background:#000c;display:flex;justify-content:center;align-items:center;z-index:9999;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.loading-content{background:#202124;padding:40px;border-radius:12px;text-align:center;box-shadow:0 4px 12px #00000080;min-width:300px;border:1px solid #3c4043}.spinner{width:50px;height:50px;border:4px solid #5f6368;border-top:4px solid #1976d2;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{font-size:16px;font-weight:500;color:#e8eaed;margin-bottom:20px;min-height:24px}.progress-bar{width:100%;height:8px;background:#f3f4f6;border-radius:4px;overflow:hidden;margin-bottom:10px}.progress-fill{height:100%;background:linear-gradient(90deg,#3b82f6,#1d4ed8);border-radius:4px;transition:width .3s ease;animation:progress-shine 2s infinite}@keyframes progress-shine{0%{box-shadow:inset 0 0 #fff6}50%{box-shadow:inset 0 0 20px #fff6}to{box-shadow:inset 0 0 #fff6}}.progress-text{font-size:14px;font-weight:600;color:#3b82f6;margin-bottom:20px}.cancel-btn{padding:10px 20px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:100px}.cancel-btn:hover:not(:disabled){background:linear-gradient(135deg,#dc2626,#b91c1c);transform:translateY(-1px);box-shadow:0 4px 12px #ef444466}.cancel-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.controls-panel{background:202124;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:16px;padding:28px;box-shadow:0 10px 30px #0000001a;height:fit-content;border:1px solid rgba(255,255,255,.2);position:relative;overflow:hidden}.controls-panel:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#667eea05,#764ba205);pointer-events:none}.controls-panel h3{color:#e8eaed;margin-bottom:20px;font-weight:600;font-size:1.1rem;border-bottom:1px solid #3c4043;padding-bottom:12px;position:relative;z-index:1}.control-group{margin-bottom:24px}.control-group label{display:block;color:#e8eaed;font-weight:500;margin-bottom:8px}.control-group input[type=number]{width:100%;padding:10px 12px;border:1px solid #5f6368;border-radius:6px;font-size:14px;margin-top:8px;transition:border-color .2s ease,box-shadow .2s ease;background:#303134;color:#e8eaed}.control-group input[type=number]:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 3px #1976d21f}.control-group input[type=number]:hover{border-color:#6b6f73}.input-description{display:block;font-size:12px;color:#6b7280;font-weight:400;margin-top:4px;margin-bottom:4px;font-style:italic}.action-buttons{display:flex;flex-direction:column;gap:12px;margin:20px}.btn{padding:14px 28px;border:none;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);font-size:14px;position:relative;overflow:hidden;letter-spacing:.3px}.btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.btn:hover:before{left:100%}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:#1976d2;color:#fff}.btn-primary:hover:not(:disabled){background:#1565c0;transform:translateY(-1px);box-shadow:0 2px 8px #1976d266}.btn-primary-alt{background:#1976d2;color:#fff}.btn-primary-alt:hover:not(:disabled){background:#1565c0;transform:translateY(-1px);box-shadow:0 2px 8px #1976d266}.btn-secondary{background:#424242;color:#e8eaed;border:1px solid #5f6368}.btn-secondary:hover{background:#525252;transform:translateY(-1px);box-shadow:0 2px 8px #42424266}.btn-danger{background:#7a1717;color:#fff;opacity:.5}.btn-danger:hover{background:#c62828;transform:translateY(-1px);box-shadow:0 2px 8px #d32f2f66}.btn-compress{background:#aa5705;color:#fff}.btn-compress:hover:not(:disabled){background:#b35203;transform:translateY(-1px);box-shadow:0 4px 12px #f59e0b66}.image-comparison{display:flex;flex-direction:column;gap:30px;flex:1}.image-panel{background:#202124;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:12px;padding:20px;box-shadow:0 2px 8px #00000080;border:1px solid #3c4043;width:100%;position:relative;overflow:hidden;transition:all .2s ease}.image-panel:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#667eea05,#764ba205);pointer-events:none}.image-panel:hover{transform:translateY(-2px);box-shadow:0 15px 40px #00000026}.image-panel h4{color:#e8eaed;margin-bottom:20px;font-weight:700;font-size:1.1rem;text-align:center;position:relative;z-index:1}.canvas-container{display:flex;justify-content:center;align-items:center;min-height:420px;background:#121212;border-radius:8px;border:1px dashed #3c4043;overflow:auto}.canvas-container canvas{max-width:100%;max-height:800px;width:auto;height:auto;border-radius:6px;box-shadow:0 2px 8px #0009}.placeholder{text-align:center;color:#9aa0a6;padding:40px 20px}.placeholder p{margin:0;font-style:italic}.export-settings{margin:20px 0;padding:12px;background:#202124;border-radius:10px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid #3c4043}.export-settings h3{margin:0 0 12px;font-size:1.05rem;font-weight:600;color:#e8eaed}.card-content .settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin:20px;padding:10px}.card-content .setting-group{display:flex;flex-direction:column;margin:20px}.card-content .setting-group label{font-size:.9rem;font-weight:500;color:#e8eaed;display:block;margin:20px}.card-content .setting-group select,.card-content .setting-group input[type=number]{padding:10px 12px;border:1px solid #5f6368;border-radius:6px;background:#303134;color:#e8eaed;font-size:.9rem;transition:all .3s ease}.card-content .setting-group input[type=range]{width:100%;margin-top:8px;accent-color:#1976d2}.card-content .setting-group select:focus,.card-content .setting-group input:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 2px #1976d233}.card-content .setting-group select option{background:#303134;color:#e8eaed}.card-content .tinypng-section{margin-top:20px;padding:16px;background:#1976d21a;border-radius:8px;border:1px solid rgba(25,118,210,.2)}.tinypng-toggle{margin-bottom:10px}.toggle-switch{display:flex;align-items:center;cursor:pointer;gap:12px}.toggle-switch input[type=checkbox]{display:none}.toggle-slider{position:relative;width:50px;height:24px;background:#2d2e30;border-radius:24px;transition:all .25s ease;border:1px solid #3c4043}.toggle-slider:before{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:#e8eaed;border-radius:50%;transition:all .25s ease;box-shadow:0 2px 4px #0006}.toggle-switch input:checked+.toggle-slider{background:#1976d2;border-color:#1976d2}.toggle-switch input:checked+.toggle-slider:before{transform:translate(26px);background:#fff}.toggle-label{flex:1;color:#e8eaed;font-weight:500}.toggle-label small{display:block;font-size:.8rem;color:#6b7280;font-weight:400;margin-top:2px}.tinypng-info{margin-top:10px;padding:10px;background:#00d4ff0d;border-radius:8px;border-left:3px solid #00d4ff}.tinypng-info p{margin:5px 0;font-size:.9rem;color:#6b7280}.tinypng-info p:first-child{margin-top:0}.tinypng-info p:last-child{margin-bottom:0}.btn-compress{background:linear-gradient(135deg,#772929,#ff8e8e);color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #ff6b6b4d}.btn-compress:hover:not(:disabled){background:linear-gradient(135deg,#ff5252,#ff7979);transform:translateY(-2px);box-shadow:0 6px 20px #ff6b6b66}.btn-compress:disabled{background:#ccc;cursor:not-allowed;transform:none;box-shadow:none}.btn-compress-all{background:linear-gradient(135deg,#482257,#bb6bd9);color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #9b59b64d}.btn-compress-all:hover:not(:disabled){background:linear-gradient(135deg,#8e44ad,#af7ac5);transform:translateY(-2px);box-shadow:0 6px 20px #9b59b666}.btn-compress-all:disabled{background:#ccc;cursor:not-allowed;transform:none;box-shadow:none}.btn-compress:before{content:"🗜️";margin-right:8px}.btn-compress-all:before{content:"📦";margin-right:8px}.collapsible-card{background:#202124;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:12px;margin-bottom:16px;box-shadow:0 1px 3px #0000004d;border:1px solid #3c4043;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.collapsible-card:hover{box-shadow:0 2px 6px #0006;transform:translateY(-1px)}.card-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;cursor:pointer;-webkit-user-select:none;user-select:none;background:#202124;border-bottom:1px solid #3c4043;transition:all .3s ease}.card-header:hover{background:#2d2e30}.card-header h3{margin:0;color:#e8eaed;font-size:1.1rem;font-weight:500}.collapse-icon{font-size:1.2rem;color:#1976d2;transition:transform .3s ease}.collapse-icon.collapsed{transform:rotate(-90deg)}.card-content{max-height:600px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);opacity:1}.card-content.collapsed{max-height:0;opacity:0;padding-top:0;padding-bottom:0}.card-content .control-group{margin:0 20px 20px}.card-content .control-group:first-child{margin-top:20px}.btn-compress:disabled,.btn-compress-all:disabled{position:relative}.btn-compress:disabled:hover:after,.btn-compress-all:disabled:hover:after{content:"Wait for current operation to complete";position:absolute;bottom:120%;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:6px 10px;border-radius:4px;font-size:.8rem;white-space:nowrap;z-index:1000;pointer-events:none}.btn-compress:disabled:hover:before,.btn-compress-all:disabled:hover:before{content:"";position:absolute;bottom:110%;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:#000c;z-index:1000;pointer-events:none}*{box-sizing:border-box}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#121212;min-height:100vh;position:relative;overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 80%,rgba(25,118,210,.03) 0%,transparent 60%),radial-gradient(circle at 80% 20%,rgba(25,118,210,.02) 0%,transparent 60%),radial-gradient(circle at 40% 40%,rgba(25,118,210,.01) 0%,transparent 60%);pointer-events:none;z-index:-1}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background:#1e1e1e;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid #333;box-shadow:0 1px 4px #0006;position:relative;overflow:hidden}.app-header:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#667eea0d,#764ba20d);pointer-events:none}.header-content{width:100%;padding:1rem 2rem;display:flex;justify-content:flex-start;align-items:center;position:relative;z-index:1}.logo{display:flex;align-items:center}.logo-text{font-size:1.5rem;font-weight:500;color:#e8eaed;letter-spacing:-.25px}.header-info h1{margin:0 0 .5rem;color:#1e293b;font-size:1.8rem;font-weight:700;line-height:1.2}.header-info p{margin:0;color:#64748b;font-size:1rem;font-weight:400}.header-right{display:flex;align-items:center}.header-stats{display:flex;gap:2rem}.stat-item{display:flex;flex-direction:column;align-items:center;gap:.25rem}.stat-icon{font-size:1.5rem}.stat-text{font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px}@media(max-width:768px){.header-content{flex-direction:column;gap:1.5rem;text-align:center;padding:1.5rem 1rem}.header-left{flex-direction:column;gap:1rem}.header-info h1{font-size:1.5rem}.header-stats{gap:1rem}}.app-main{flex:1;padding:0;margin:0;width:100vw;height:calc(100vh - 80px);top:0;left:0}@media(max-width:768px){.app-header{padding:1.5rem 1rem}.app-header h1{font-size:2rem}.app-main{padding:0;height:calc(100vh - 100px)}}