.compressor-page{background:#f7f9fd;min-height:70vh;padding-bottom:70px}.compressor-container{width:min(1120px,calc(100% - 48px));margin:auto}.compressor-intro{padding:36px 0 30px;text-align:center;background:#fff;border-bottom:1px solid #edf0f5}.compressor-breadcrumbs{display:flex;justify-content:center;gap:10px;color:#8290a3;font-size:12px;margin-bottom:26px}.compressor-breadcrumbs a{color:#52647d}.compressor-intro h1{font:800 clamp(34px,4vw,44px)/1.15 var(--head);letter-spacing:-1.6px;color:var(--navy);margin:12px 0 9px}.compressor-intro>div>p:not(.privacy-callout){font-size:16px;color:#68778c;margin:0}.privacy-callout{display:inline-flex;gap:9px;align-items:center;margin:20px 0 0;padding:10px 15px;border-radius:8px;background:#edf8f3;color:#39795f;font-size:13px}.privacy-callout span{font-size:16px}.compressor-workspace{padding:32px 0 0}.upload-panel,.settings-card,.queue-card{background:white;border:1px solid #e2e8f1;border-radius:14px;box-shadow:0 5px 20px #1d35500a}.upload-panel{padding:14px}.drop-zone{min-height:265px;border:2px dashed #c8d6ed;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;transition:border-color .18s,background .18s}.drop-zone:hover,.drop-zone:focus,.drop-zone.is-dragging{border-color:#6792e8;background:#f8faff;outline:none}.upload-symbol{width:58px;height:58px;border-radius:16px;background:#edf3ff;display:grid;place-items:center;color:var(--blue);margin-bottom:12px}.upload-symbol svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.drop-zone h2{font:700 20px var(--head);color:var(--navy);margin:0 0 5px}.drop-zone p{font-size:14px;color:#748197;margin:0 0 15px}.drop-zone small{font-size:12px;color:#8491a4;margin-top:14px}.compressor-page .button{font-size:14px;cursor:pointer;border:0}.button-outline{background:#fff;border:1px solid #d8e0ec!important;color:#3d5f98}.button-outline:hover{background:#f5f8ff}.upload-error{color:#ae3340;background:#fff1f2;padding:11px 14px;margin:12px 3px 0;border-radius:7px;font-size:13px}.editor-grid{display:grid;grid-template-columns:minmax(290px,.72fr) minmax(0,1.28fr);gap:18px;margin-top:20px;align-items:start}.settings-card,.queue-card{padding:22px}.card-title{display:flex;align-items:center;gap:12px;margin-bottom:21px}.step-number{width:32px;height:32px;flex:0 0 32px;border-radius:50%;display:grid;place-items:center;background:#eaf0ff;color:var(--blue);font:700 14px var(--head)}.card-title h2{font:700 18px var(--head);color:#233451;margin:0 0 4px}.card-title p{font-size:12px;color:#7c899d;margin:0}.setting-group{border:0;border-top:1px solid #edf0f5;margin:0;padding:17px 0 12px}.setting-group legend,.mode-panel>label,.format-field>label{font-size:13px;font-weight:700;color:#34445e;padding-top:13px}.radio-option{display:flex;align-items:center;gap:10px;border:1px solid #e3e9f1;border-radius:9px;padding:11px;margin-top:9px;cursor:pointer}.radio-option:has(input:checked){border-color:#91afe9;background:#f7f9ff}.radio-option input{accent-color:var(--blue);width:16px;height:16px}.radio-option span{display:flex;flex-direction:column;gap:3px}.radio-option strong{font-size:13px}.radio-option small,.field-help{font-size:11px;color:#8290a3}.mode-panel{border-top:1px solid #edf0f5;padding:16px 0}.mode-panel>label{display:flex;justify-content:space-between;align-items:center;padding:0;margin-bottom:9px}.target-controls{display:flex;gap:8px}.target-controls select,.custom-size input,.custom-size select,.format-field select{height:42px;border:1px solid #dce3ed;background:white;border-radius:7px;padding:0 10px;color:#34445e;font:13px var(--font);min-width:0}.target-controls>select{flex:1}.custom-size{display:flex;gap:6px;flex:1}.custom-size input{width:60%;}.custom-size select{width:40%}.field-help{display:block;line-height:1.5;margin:8px 0 0}.mode-panel input[type=range]{width:100%;accent-color:var(--blue)}.range-labels{display:flex;justify-content:space-between;color:#8995a7;font-size:10px}.format-field{border-top:1px solid #edf0f5;padding-top:16px;display:flex;flex-direction:column;gap:8px}.format-field>label{padding:0}.format-field select{width:100%}.format-field .field-help{margin:0}.compress-button{width:100%;margin-top:19px}.queue-title{margin-bottom:15px}.queue-title .text-button{margin-left:auto}.text-button{border:0;background:none;color:#5576b3;font-weight:600;font-size:12px;cursor:pointer;padding:8px}.text-button:hover{text-decoration:underline}.image-list{display:grid;gap:11px}.image-card{border:1px solid #e8edf3;border-radius:10px;padding:13px}.image-card-head{display:flex;align-items:center;gap:12px}.file-thumb{width:57px;height:57px;border-radius:7px;object-fit:cover;background:#f0f3f8}.file-details{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}.file-name{font-size:13px;overflow-wrap:anywhere;color:#273853}.file-meta,.file-status{font-size:11px;color:#7d899a}.file-status{color:#597fc3}.file-status[data-state=error]{color:#b7464e}.file-status[data-state=done]{color:#30936e}.file-status[data-state=warning]{color:#aa7c2c}.remove-button{width:30px;height:30px;border:0;border-radius:7px;background:#f4f6f9;color:#738096;font-size:21px;line-height:1;cursor:pointer}.remove-button:hover{background:#fff0f0;color:#be4650}.image-result{border-top:1px solid #edf0f5;margin-top:13px;padding-top:13px}.preview-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.preview-pair figure{margin:0;min-width:0}.preview-pair img{display:block;width:100%;height:135px;object-fit:contain;border:1px solid #e9edf3;border-radius:7px;background:repeating-conic-gradient(#f2f4f7 0% 25%,#fff 0% 50%) 50%/16px 16px}.preview-pair figcaption{font-size:10px;color:#77859a;margin-top:5px}.result-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}.result-stat{padding:9px;background:#f7f9fc;border-radius:7px}.result-stat small{display:block;color:#8390a2;font-size:10px;margin-bottom:4px}.result-stat strong{font-size:12px;color:#30425e;overflow-wrap:anywhere}.result-message{font-size:12px;line-height:1.55;color:#68778c;margin:10px 0}.result-message.warning{padding:9px;background:#fff9eb;color:#846629;border-radius:6px}.download-link{display:inline-flex;background:#edf3ff;color:#315fae;padding:9px 12px;border-radius:7px;font-size:12px;font-weight:700}.queue-footer{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #edf0f5;padding-top:15px;margin-top:15px}.queue-footer button{font-size:12px!important;padding:11px 13px}.zip-status{font-size:12px;color:#63748d;margin:10px 0 0}.zip-status:empty{display:none}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:850px){.compressor-container{width:min(100% - 36px,700px)}.editor-grid{grid-template-columns:1fr}.settings-card{order:1}.queue-card{order:2}}
@media(max-width:520px){.compressor-container{width:calc(100% - 28px)}.compressor-intro{padding:25px 0}.compressor-breadcrumbs{font-size:11px;margin-bottom:19px}.compressor-intro h1{font-size:34px;letter-spacing:-1.1px}.compressor-intro>div>p:not(.privacy-callout){font-size:14px;line-height:1.55}.privacy-callout{font-size:11px;line-height:1.5;text-align:left;margin-top:15px}.compressor-workspace{padding-top:18px}.upload-panel{padding:9px}.drop-zone{min-height:245px;padding:17px}.drop-zone h2{font-size:18px}.drop-zone p{font-size:13px}.drop-zone small{font-size:10px;line-height:1.5}.editor-grid{gap:12px;margin-top:13px}.settings-card,.queue-card{padding:15px}.card-title h2{font-size:16px}.card-title p{font-size:11px}.file-thumb{width:48px;height:48px}.file-name{font-size:12px}.preview-pair img{height:110px}.queue-footer{flex-wrap:wrap}.queue-footer button{flex:1}.queue-footer .zip-button{flex-basis:100%}}

.compressor-page [hidden]{display:none!important}
.queue-footer #another-button{font-size:11px!important;padding-inline:10px}
@media(max-width:520px){.queue-footer #another-button{flex-basis:calc(50% - 6px)}}
.zip-disclosure{display:block;color:#8995a7;font-size:10px;text-align:right;margin-top:8px}@media(max-width:520px){.zip-disclosure{text-align:left}}

.file-status[data-state=working]{color:#326bdb}
.file-progress{display:block;width:min(100%,210px);height:5px;margin-top:4px;accent-color:#326bdb}
.file-progress:not([value]){appearance:none;background:#e8edf5;border:0;border-radius:8px;overflow:hidden}
.file-progress:not([value])::-webkit-progress-bar{background:#e8edf5}
.file-progress:not([value])::-webkit-progress-value{background:#7fa2e9}
.file-progress:not([value])::-moz-progress-bar{background:#7fa2e9}
.png-options{border-top:1px solid #edf0f5;padding-top:12px;margin-top:3px}
.dimension-option{display:flex;align-items:flex-start;gap:9px;border:1px solid #dce5f3;background:#f8faff;border-radius:8px;padding:10px;cursor:pointer}
.dimension-option input{accent-color:#326bdb;margin:2px 0 0;width:16px;height:16px;flex:0 0 16px}
.dimension-option span{display:flex;flex-direction:column;gap:4px}
.dimension-option strong{font-size:12px;color:#34445e}
.dimension-option small{font-size:11px;line-height:1.45;color:#78869a}
.png-options>.field-help{margin-top:9px}
.preview-zoom{position:relative;display:block;overflow:hidden;border:1px solid #e9edf3;border-radius:7px;background:repeating-conic-gradient(#f2f4f7 0% 25%,#fff 0% 50%) 50%/16px 16px}
.preview-zoom img{border:0;border-radius:0}
.preview-zoom>span{position:absolute;right:5px;bottom:5px;border-radius:5px;background:#142544d9;color:#fff;padding:4px 6px;font-size:9px;opacity:.92}
.preview-zoom:focus-visible{outline:3px solid #8eb1ff;outline-offset:2px}
.preview-pair figcaption{font-weight:600}
.result-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.zip-guidance{margin:8px 0 0;color:#7d8a9d;font-size:11px;line-height:1.5}
.compressor-page .button:disabled{opacity:.52;cursor:not-allowed;box-shadow:none}.compressor-page .button-primary:disabled:hover{background:#326bdb}