@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap";.tool-container{max-width:1000px;margin:0 auto}.upload-section{margin-bottom:2rem}.edit-section{flex-direction:column;gap:1.5rem;display:flex}.preview-grid{grid-template-columns:1fr 1fr;gap:1.5rem;display:grid}@media (width<=768px){.preview-grid{grid-template-columns:1fr}}.preview-card{border:1px solid var(--border-color);background:#fff;border-radius:.75rem;padding:1.5rem}.preview-card h3{color:var(--text-primary);margin-bottom:1rem;font-size:1rem;font-weight:600}.preview-image{aspect-ratio:4/3;background:#f8fafc;border-radius:.5rem;justify-content:center;align-items:center;display:flex;overflow:hidden}.preview-image img{object-fit:contain;max-width:100%;max-height:100%}.preview-placeholder{color:var(--text-secondary);font-size:.875rem}.file-info{color:var(--text-secondary);gap:1rem;margin-top:1rem;font-size:.875rem;display:flex}.compression-ratio{color:var(--color-success);font-weight:500}.settings-card{border:1px solid var(--border-color);background:#fff;border-radius:.75rem;padding:1.5rem}.settings-card h3{color:var(--text-primary);margin-bottom:1rem;font-size:1rem;font-weight:600}.settings-grid{grid-template-columns:repeat(2,1fr);gap:1rem;display:grid}@media (width<=640px){.settings-grid{grid-template-columns:1fr}}.setting-item{flex-direction:column;gap:.5rem;display:flex}.setting-item label{color:var(--text-primary);font-size:.875rem;font-weight:500}.setting-item input[type=text],.setting-item input[type=number],.setting-item select{border:1px solid var(--border-color);background:#fff;border-radius:.5rem;padding:.5rem .75rem;font-size:.875rem}.setting-item input:focus,.setting-item select:focus{border-color:var(--primary-color);outline:none}.setting-item input[type=range],.quality-slider,.rotation-slider{appearance:none;background:var(--border-color);border-radius:.25rem;outline:none;width:100%;height:.5rem}.setting-item input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--primary-color);cursor:pointer;border-radius:50%;width:1.25rem;height:1.25rem;transition:all .2s}.quality-slider::-webkit-slider-thumb{appearance:none;background:var(--primary-color);cursor:pointer;border-radius:50%;width:1.25rem;height:1.25rem;transition:all .2s}.rotation-slider::-webkit-slider-thumb{appearance:none;background:var(--primary-color);cursor:pointer;border-radius:50%;width:1.25rem;height:1.25rem;transition:all .2s}.setting-item input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)}.quality-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.rotation-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.quality-hints{color:var(--text-secondary);justify-content:space-between;font-size:.75rem;display:flex}.checkbox-label{cursor:pointer;color:var(--text-secondary);align-items:center;gap:.5rem;font-size:.875rem;display:flex}.checkbox-label input[type=checkbox]{width:1.25rem;height:1.25rem;accent-color:var(--primary-color)}.color-picker-wrapper{align-items:center;gap:.75rem;display:flex}.color-picker-wrapper input[type=color]{border:1px solid var(--border-color);cursor:pointer;border-radius:.5rem;width:50px;height:40px;padding:2px}.color-value{color:var(--text-secondary);font-family:monospace;font-size:.875rem}.action-buttons{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.btn-icon{width:1.25rem;height:1.25rem}.progress-section{align-items:center;gap:1rem;display:flex}.progress-text{color:var(--text-secondary);text-align:right;min-width:3rem;font-size:.875rem}.results-section{border:1px solid var(--border-color);background:#fff;border-radius:.75rem;padding:1.5rem}.results-section h3{color:var(--text-primary);margin-bottom:1rem;font-size:1rem;font-weight:600}.results-list{flex-direction:column;gap:.5rem;display:flex}.result-item{background:var(--color-bg);border-radius:.5rem;justify-content:space-between;align-items:center;padding:.5rem .75rem;display:flex}.result-name{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:.875rem;overflow:hidden}.result-size,.result-sizes{color:var(--text-secondary);margin:0 1rem;font-size:.75rem}.result-ratio{color:var(--color-success);font-size:.75rem;font-weight:500}.file-list{border:1px solid var(--border-color);background:#fff;border-radius:.75rem;padding:1.5rem}.file-list-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.file-list-header h3{color:var(--text-primary);margin-bottom:0;font-size:1rem;font-weight:600}.add-files-btn{cursor:pointer}.file-list h3{color:var(--text-primary);margin-bottom:1rem;font-size:1rem;font-weight:600}.files-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem;display:grid}.file-item{background:var(--color-bg);border-radius:.5rem;justify-content:space-between;align-items:center;padding:.5rem .75rem;display:flex}.file-name{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;overflow:hidden}.file-size{color:var(--text-secondary);font-size:.75rem}.filter-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.75rem;display:grid}.filter-btn{border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;background:#fff;border-radius:.5rem;padding:.75rem 1rem;font-size:.875rem;transition:all .2s}.filter-btn:hover{border-color:var(--primary-color);color:var(--primary-color)}.filter-btn.active{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.crop-modes{flex-wrap:wrap;gap:.5rem;display:flex}.mode-btn{border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;background:#fff;border-radius:.5rem;padding:.5rem 1rem;font-size:.875rem;transition:all .2s}.mode-btn:hover{border-color:var(--primary-color);color:var(--primary-color)}.mode-btn.active{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.rotation-presets{gap:.5rem;margin-top:.5rem;display:flex}.preset-btn{border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;background:#fff;border-radius:.5rem;padding:.5rem 1rem;font-size:.875rem;transition:all .2s}.preset-btn:hover{border-color:var(--primary-color);color:var(--primary-color)}.flip-buttons{gap:1rem;margin-top:1rem;display:flex}.flip-buttons svg{width:1.25rem;height:1.25rem}.input-group{flex-direction:column;gap:.5rem;display:flex}.input-group label{color:var(--text-primary);font-size:.875rem;font-weight:500}.input-group input{border:1px solid var(--border-color);border-radius:.5rem;padding:.5rem .75rem;font-size:.875rem}.input-group input:focus{border-color:var(--primary-color);outline:none}.dimension-inputs{grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;display:grid}@media (width<=640px){.dimension-inputs{grid-template-columns:1fr}}.adjustment-sliders{flex-direction:column;gap:1rem;display:flex}.slider-group{flex-direction:column;gap:.5rem;display:flex}.slider-group label{color:var(--text-primary);font-size:.875rem;font-weight:500}.crop-container{cursor:crosshair;-webkit-user-select:none;user-select:none;position:relative}.crop-container img{object-fit:contain;width:100%;height:100%}.crop-overlay{border:2px dashed var(--primary-color);pointer-events:none;background:#0891b21a;position:absolute}.crop-border{border:2px solid #fff;position:absolute;inset:0;box-shadow:0 0 0 9999px #00000080}.crop-info{background:var(--primary-color);color:#fff;white-space:nowrap;border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;position:absolute;bottom:-25px;left:50%;transform:translate(-50%)}.preview-image-grid{background:#f8fafc;border-radius:.5rem;justify-content:center;align-items:center;padding:1rem;display:flex;overflow:hidden}.preview-image-grid img{max-width:100%;height:auto}.results-card{border:1px solid var(--border-color);background:#fff;border-radius:.75rem;padding:1.5rem}.results-card h3{color:var(--text-primary);margin-bottom:1rem;font-size:1rem;font-weight:600}.icons-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem;display:grid}.icon-item{background:var(--color-bg);border-radius:.5rem;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;display:flex}.icon-preview{border:1px solid var(--border-color);background:#fff;border-radius:.25rem;justify-content:center;align-items:center;width:64px;height:64px;display:flex}.icon-preview img{object-fit:contain;max-width:100%;max-height:100%}.icon-size{color:var(--text-secondary);font-size:.75rem}.sizes-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:.75rem;display:grid}.size-btn{border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;background:#fff;border-radius:.5rem;padding:.75rem;font-size:.875rem;transition:all .2s}.size-btn:hover{border-color:var(--primary-color);color:var(--primary-color)}.size-btn.active{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.hint{color:var(--text-secondary);margin-bottom:1rem;font-size:.875rem}.btn-sm{padding:.375rem .75rem;font-size:.75rem}.base64-textarea{border:1px solid var(--border-color);resize:vertical;border-radius:.5rem;width:100%;height:200px;padding:.75rem;font-family:monospace;font-size:.75rem}.base64-textarea:focus{border-color:var(--primary-color);outline:none}.picker-section{border:1px solid var(--border-color);background:#fff;border-radius:.75rem;padding:1.5rem}.picker-section h3{color:var(--text-primary);margin-bottom:1rem;font-size:1rem;font-weight:600}.image-container{justify-content:center;display:flex}.pickable-image{cursor:crosshair;border-radius:.5rem;max-width:100%;max-height:500px}.color-result{border:1px solid var(--border-color);background:#fff;border-radius:.75rem;padding:1.5rem}.color-result h3{color:var(--text-primary);margin-bottom:1rem;font-size:1rem;font-weight:600}.color-preview{border:1px solid var(--border-color);border-radius:.5rem;width:100px;height:100px;margin-bottom:1rem}.color-values{flex-direction:column;gap:.5rem;display:flex}.color-value{background:var(--color-bg);cursor:pointer;border-radius:.5rem;align-items:center;gap:.5rem;padding:.5rem .75rem;transition:all .2s;display:flex}.color-value:hover{background:#0891b21a}.color-value .label{color:var(--text-secondary);font-size:.875rem;font-weight:500}.color-value .value{color:var(--text-primary);font-family:monospace;font-size:.875rem}.result-card{border:1px solid var(--border-color);background:#fff;border-radius:.75rem;padding:1.5rem}.result-card h3{color:var(--text-primary);margin-bottom:1rem;font-size:1rem;font-weight:600}.checkbox-item{flex-direction:row;align-items:center;gap:1rem}.format-selector{flex-wrap:wrap;gap:1rem;display:flex}.format-option{cursor:pointer;border:1px solid var(--border-color);border-radius:.5rem;align-items:center;gap:.5rem;padding:.5rem 1rem;transition:all .2s;display:flex}.format-option:hover{border-color:var(--primary-color)}.format-option input[type=radio]{accent-color:var(--primary-color)}.format-label{color:var(--text-primary);font-size:.875rem}.quality-setting{flex-direction:column;gap:.5rem;margin-top:1rem;display:flex}.quality-setting label{color:var(--text-primary);font-size:.875rem;font-weight:500}.description-section{border-top:2px solid var(--color-border);margin-top:4rem;padding:5rem 0 4rem}.description-content{margin:0 auto;padding:0 2rem}.description-title{color:var(--color-text);margin-bottom:1.25rem;font-size:1.5rem;font-weight:700}.description-text{color:var(--color-text-secondary);margin-bottom:3rem;font-size:1rem;line-height:1.8}.faq-section{border-top:2px solid var(--color-border);padding-top:3rem}.faq-title{color:var(--color-text);margin-bottom:2rem;font-size:1.25rem;font-weight:700}.faq-item{border-bottom:1px solid #0000000f;margin-bottom:2rem;padding-bottom:2rem}.faq-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.faq-question{color:var(--color-text);margin-bottom:.75rem;font-size:1rem;font-weight:600;line-height:1.5}.faq-answer{color:var(--color-text-secondary);font-size:.9375rem;line-height:1.8}*{box-sizing:border-box;margin:0;padding:0}:root{--font-sans:"Plus Jakarta Sans", "PingFang SC", "Microsoft Yahei", sans-serif;--color-primary:#0891b2;--color-primary-light:#22d3ee;--color-cta:#22c55e;--color-bg:#ecfeff;--color-bg-secondary:#fff;--color-text:#164e63;--color-text-primary:#164e63;--color-text-secondary:#64748b;--color-text-muted:#475569;--color-border:#e2e8f0;--color-white:#fff;--color-error:#ef4444;--color-warning:#f59e0b;--color-success:#22c55e;--primary-color:var(--color-primary);--text-primary:var(--color-text-primary);--text-secondary:var(--color-text-secondary);--bg-secondary:var(--color-bg-secondary);--border-color:var(--color-border)}html{scroll-behavior:smooth}body{font-family:var(--font-sans);background-color:var(--color-bg);color:var(--color-text);min-height:100vh;line-height:1.6}button,input,select,textarea{font-family:inherit}.container{margin:0 auto;padding:0 1rem}@media (width>=640px){.container{padding:0 1.5rem}}@media (width>=1024px){.container{padding:0 2rem}}.btn{cursor:pointer;border:none;border-radius:.5rem;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.875rem;font-weight:500;text-decoration:none;transition:all .15s;display:inline-flex}.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover{background-color:#0e7490}.btn-cta{background-color:var(--color-cta);color:#fff}.btn-cta:hover{background-color:#16a34a}.btn-secondary{color:var(--color-text);border:1px solid var(--color-border);background-color:#fff}.btn-secondary:hover{background-color:#f8fafc}.btn:disabled{opacity:.5;cursor:not-allowed}.card{border:1px solid var(--color-border);background-color:#fff;border-radius:.75rem;padding:1.5rem}.upload-zone{border:2px dashed var(--color-border);text-align:center;cursor:pointer;border-radius:.75rem;padding:2rem;transition:all .15s}.upload-zone:hover{border-color:var(--color-primary);background-color:#0891b20d}.upload-zone.dragover{border-color:var(--color-primary);background-color:#0891b21a}.progress-bar{background-color:var(--color-border);border-radius:9999px;width:100%;height:.5rem;overflow:hidden}.progress-bar-fill{background-color:var(--color-primary);border-radius:9999px;height:100%;transition:width .15s}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}a,button{transition:all .15s}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}