.image-compress-tool{width:100%;padding:0;font-family:PingFang SC,Microsoft YaHei,sans-serif}.hero-section{color:#333;padding:30px 0;position:relative;overflow:hidden;min-height:280px;box-shadow:none;background-color:#f8f9fa}.dark .hero-section{background-color:#2d2d2d;color:#f0f0f0}.hero-content{text-align:left;max-width:600px;margin:0 0 20px 60px;position:relative;z-index:10}.hero-content h1{font-size:2.2rem;font-weight:600;margin-bottom:16px;color:#333;line-height:1.2}.dark .hero-content h1{color:#f0f0f0}.hero-content p{font-size:1.1rem;color:#555;margin-bottom:20px}.dark .hero-content p{color:#ccc}.hero-button{background-color:rgb(37,99,235);color:white;border:none;border-radius:4px;padding:10px 20px;font-size:1rem;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;transition:background-color .2s}.hero-button:hover{background-color:rgb(29,78,216)}.upload-container{border:2px dashed #dde0e4;border-radius:4px;padding:30px 20px;text-align:center;transition:all .3s;cursor:pointer;background-color:white;box-shadow:none;max-width:660px;margin:0 auto;z-index:10;position:relative}.dark .upload-container{background-color:#333;border-color:#555}.upload-container.active{border-color:rgb(37,99,235);background-color:rgba(255,255,255,.9)}.dark .upload-container.active{background-color:rgba(51,51,51,.9)}.upload-container.loading{cursor:wait;opacity:.8}.upload-content{display:flex;flex-direction:column;align-items:center;justify-content:center}.upload-icon{margin-bottom:20px;width:60px;height:60px;color:#343341}.upload-content h3{font-size:1.4rem;font-weight:500;margin-bottom:8px;color:#333}.dark .upload-content h3{color:#f0f0f0}.upload-content p{margin:0;padding:0;color:#666}.dark .upload-content p{color:#aaa}.convert-options{background-color:white;padding:15px 20px;border-radius:0 0 4px 4px;box-shadow:none;max-width:660px;margin:-5px auto 0;border:1px solid #eaeaea;border-top:none}.dark .convert-options{background-color:#333;border-color:#555}.switch{position:relative;display:inline-block;width:50px;height:24px;margin-right:10px}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc}.slider,.slider:before{position:absolute;transition:.4s}.slider:before{content:"";height:16px;width:16px;left:4px;bottom:4px;background-color:white}input:checked+.slider{background-color:rgb(37,99,235)}input:focus+.slider{box-shadow:none}input:checked+.slider:before{transform:translateX(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.results-section{background-color:#f8f9fa;border-radius:4px;box-shadow:none;padding:25px;color:#333;margin-top:20px}.dark .results-section{background-color:#2d2d2d;color:#f0f0f0}.results-stats{margin-bottom:25px;padding:20px;border-radius:4px;background-color:#fff;display:flex;justify-content:space-between;align-items:center}.dark .results-stats{background-color:#333;border-color:#555}.results-stats-left{text-align:left}.results-stats h3{font-size:1.4rem;font-weight:600;margin-bottom:5px;color:#333}.dark .results-stats h3{color:#f0f0f0}.results-stats p{margin:0;color:#666}.dark .results-stats p{color:#aaa}.stats-box{background-color:#f5f5f5;border-radius:4px;padding:8px 15px;min-width:90px;text-align:center;margin-right:10px;border:1px solid #eaeaea}.dark .stats-box{background-color:#3a3a3a;border:1px solid #555}.stats-value{font-size:1.1rem;font-weight:500;color:#333;margin-bottom:2px}.dark .stats-value{color:#f0f0f0}.stats-label{font-size:.8rem;color:#666}.dark .stats-label{color:#aaa}.stats-arrow{font-size:1.5rem;color:#ccc;margin:0 5px}.dark .stats-arrow{color:#666}.stats-box.highlight{background-color:rgba(37,99,235,.1);border-color:rgba(37,99,235,.2)}.dark .stats-box.highlight{background-color:rgba(37,99,235,.15);border-color:rgba(37,99,235,.3)}.stats-box.highlight .stats-value{color:rgb(37,99,235)}.results-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.share-buttons{display:flex}.share-button{background-color:#f0f2f5;color:#333;border:none;border-radius:4px;padding:8px 15px;margin-left:10px;font-size:.9rem;cursor:pointer;display:flex;align-items:center;transition:all .2s}.dark .share-button{background-color:#444;color:#eee}.share-button:hover{background-color:#e0e3e9}.dark .share-button:hover{background-color:#555}.results-grid{flex-direction:column;gap:unset;border-radius:4px}.result-item,.results-grid{display:flex;position:relative;overflow:hidden}.result-item{background-color:#fff;box-shadow:none;transition:transform .2s;align-items:center;border-bottom:1px solid #f8f9fa}.dark .result-item{background-color:#333;border-color:#555}.result-item:hover{transform:translateY(-1px)}.image-preview{position:relative;height:120px;width:160px;min-width:160px;background-color:#f5f7fa;display:flex;align-items:center;justify-content:center;padding:10px;overflow:hidden;margin-left:10px;border-radius:4px}.dark .image-preview{background-color:#2a2a2a}.image-preview img{max-width:100%;max-height:100px;-o-object-fit:contain;object-fit:contain;border-radius:2px}.status-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background-color:rgba(255,255,255,.85);color:#333;flex-direction:column;transition:opacity .3s}.dark .status-overlay{background-color:rgba(42,42,42,.85);color:#f0f0f0}.status-overlay.pending{opacity:0;pointer-events:none}.status-overlay.uploading{background-color:rgba(37,99,235,.1)}.dark .status-overlay.uploading{background-color:rgba(37,99,235,.2)}.status-overlay.compressing{background-color:rgba(37,99,235,.1)}.dark .status-overlay.compressing{background-color:rgba(37,99,235,.2)}.status-overlay.error{background-color:rgba(244,67,54,.1);opacity:1;pointer-events:all}.dark .status-overlay.error{background-color:rgba(244,67,54,.2)}.progress-animation{width:50px;height:50px}@keyframes progress-bar-animation{0%{width:0}to{width:100%}}.download-btn{background-color:rgb(37,99,235);color:white;border:none;border-radius:4px;padding:8px 15px;font-size:.9rem;cursor:pointer;margin-top:0;display:inline-flex;align-items:center;transition:background-color .2s;width:auto;min-width:80px;justify-content:center}.download-btn:hover{background-color:rgb(29,78,216)}.retry-btn{background-color:#f44336;color:white;border:none;border-radius:4px;padding:8px 15px;font-size:.9rem;cursor:pointer;margin-top:0;display:inline-flex;align-items:center;transition:background-color .2s;width:auto;min-width:80px;justify-content:center}.retry-btn:hover{background-color:#e53935}.waiting-btn{background-color:#9e9e9e;padding:8px 15px;font-size:.9rem;margin-top:0;width:auto;min-width:80px;justify-content:center;cursor:not-allowed}.waiting-btn,button.download-all-btn{color:white;border:none;border-radius:4px;display:inline-flex;align-items:center}button.download-all-btn{background-color:rgb(37,99,235);padding:10px 20px;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color .2s}button.download-all-btn:hover{background-color:rgb(29,78,216)}button.clear-all-btn{background-color:transparent;color:#666;border:1px solid #ccc;border-radius:4px;padding:10px 20px;font-size:1rem;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;transition:all .2s}.dark button.clear-all-btn{color:#ddd;border-color:#666}button.clear-all-btn:hover{background-color:#f5f5f5}.dark button.clear-all-btn:hover{background-color:#444}@media (max-width:768px){.hero-content{margin:0 20px 20px;text-align:center;display:flex;flex-direction:column;align-items:center}.hero-content h1{font-size:1.6rem}.result-item{width:100%;flex-direction:column}.image-preview{width:100%;height:160px;min-width:auto;border-right:none;border-bottom:1px solid #eaeaea}.dark .image-preview{border-right:none;border-bottom:1px solid #555}.image-preview img{max-height:140px}.upload-container{padding:30px 15px}.results-stats{padding:15px;flex-direction:column;text-align:center}.results-stats h3{font-size:1.2rem}.results-stats-left{margin-bottom:15px}.flex.items-center.mt-3{justify-content:center}.stats-box{min-width:60px;padding:5px 10px;margin:0 5px}.stats-arrow{margin:0;font-size:1.2rem}}