.imageToolsPage{flex:1;padding-top:clamp(32px,4vw,56px)}.imageToolsShell{width:min(100%,1500px);margin-inline:auto}.imageToolsIntro{margin-bottom:clamp(24px,3vw,36px)}.imageToolsIntro h1{color:var(--text-primary);letter-spacing:-.045em;margin:0;font-size:clamp(1.8rem,2.7vw,2.6rem);line-height:1.15}.imageToolsIntro p{color:#505050;margin:9px 0 0;font-size:1rem;line-height:1.5}.imageUploadPanel{place-items:center;margin-bottom:clamp(20px,2.5vw,30px);display:grid}.imageDropzone{background:var(--surface-white);text-align:left;border:1px dashed #a5b8c8;justify-content:center;align-items:center;gap:18px;width:min(100%,960px);min-height:145px;padding:24px 30px;transition:border-color .16s,background-color .16s;display:flex}.imageDropzone.isDragActive{border-color:var(--primary-color);background:var(--primary-color-light)}.imageDropzone>svg{fill:none;width:30px;height:30px;stroke:var(--primary-color);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.55px;flex:none}.imageDropzone h2{color:var(--text-primary);letter-spacing:-.02em;margin:0;font-size:1.15rem}.imageDropzone p{max-width:520px;color:var(--text-secondary);margin:5px 0 0;font-size:.84rem;line-height:1.5}.imageDropzone .uploadLimits{color:#7c837e;margin-top:7px}.imageDropzone .decodedLimit{color:#7c837e}.imageDropzone .privacyNote{color:#6b746e}.imageValidationMessage{border:1px solid var(--primary-color-border);color:#164c72;background:#f2f9ff;width:min(100%,960px);min-height:43px;margin-top:10px;padding:10px 12px;font-size:.84rem;line-height:1.45}.imageValidationMessage.isWarning{color:#8a1c16;background:#fff5f4;border-color:#f0b8b2}.imageValidationMessage[hidden],.imageWorkspace[hidden],.imageResults[hidden],.resizeControls[hidden]{display:none}.primaryAction{border:1px solid var(--primary-color);color:#fff;background:var(--primary-color);cursor:pointer;border-radius:5px;min-height:34px;padding:7px 14px;font-size:.82rem;font-weight:600}.primaryAction:hover{border-color:var(--primary-color-hover);background:var(--primary-color-hover)}.primaryAction:disabled,.commandButton:disabled{opacity:.45;cursor:not-allowed}.primaryAction:focus-visible,.commandButton:focus-visible,.imageRemoveButton:focus-visible,.imageDownloadButton:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}.commandBar{border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);background:var(--surface-white);scrollbar-width:thin;min-width:0;display:flex;overflow-x:auto}.commandGroup{border-right:1px solid var(--border-subtle);flex:none;align-items:center;gap:2px;padding:5px 8px;display:flex}.commandGroupEnd{border-right:0}.commandButton{color:#3f4642;white-space:nowrap;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:4px;align-items:center;gap:6px;min-height:34px;padding:6px 8px;font-size:.77rem;font-weight:500;display:inline-flex}.commandButton svg,.resultsHeading svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.75px;width:17px;height:17px}.commandButton:hover:not(:disabled){border-color:var(--primary-color-border);background:var(--primary-color-light);color:var(--primary-color)}.primaryCommand{border-color:var(--primary-color);color:#fff;background:var(--primary-color)}.primaryCommand:hover:not(:disabled){border-color:var(--primary-color-hover);color:#fff;background:var(--primary-color-hover)}.workspaceSummary{justify-content:space-between;align-items:end;gap:20px;min-height:77px;padding:18px 0 14px;display:flex}.workspaceSummary h2,.imageOptionsPanel h2,.imageResults h2{color:var(--text-primary);letter-spacing:-.025em;margin:0;font-size:1.1rem}.workspaceSummary p,.resultsHeading p{color:var(--text-secondary);margin:4px 0 0;font-size:.84rem}.workspaceSummary .workspaceStatus{text-align:right;max-width:550px}.imageWorkspaceLayout{grid-template-columns:minmax(0,1fr) minmax(265px,310px);align-items:start;gap:clamp(16px,2vw,26px);display:grid}.imageList{gap:10px;display:grid}.imageCard{border:1px solid var(--border-subtle);background:var(--surface-white);grid-template-columns:88px minmax(0,1fr) auto;align-items:center;gap:12px;min-width:0;padding:10px;display:grid}.imageThumbnail{background:#f1f2f3;place-items:center;width:88px;height:66px;display:grid;overflow:hidden}.imageThumbnail img{object-fit:contain;width:100%;height:100%}.imageMetadata{gap:3px;min-width:0;display:grid}.imageMetadata strong{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;font-size:.87rem;overflow:hidden}.fileFormat{font-weight:700}.fileFormatJpeg{color:#a85c00}.fileFormatPng{color:#197a30}.fileFormatWebp{color:#087bb8}.imageMetadata>span{color:var(--text-secondary);font-size:.79rem}.imageRemoveButton,.imageDownloadButton{color:var(--primary-color);font:inherit;cursor:pointer;background:0 0;border:0;padding:5px 7px;font-size:.78rem;font-weight:600}.imageRemoveButton:hover,.imageDownloadButton:hover{background:var(--primary-color-light)}.imageOptionsPanel{border:1px solid var(--border-subtle);background:var(--surface-white);gap:13px;padding:14px;display:grid}.imageOptionsPanel>label,.resizeControls>label{color:#4e5650;gap:5px;font-size:.84rem;font-weight:600;display:grid}.imageOptionsPanel select,.imageOptionsPanel input[type=number]{border:1px solid var(--border-subtle);width:100%;min-height:34px;color:var(--text-primary);font:inherit;background:#fff;border-radius:4px;padding:6px 7px;font-size:.84rem}.imageOptionsPanel input[type=range]{width:100%;accent-color:var(--primary-color);margin:0}.imageOptionsPanel input[type=range]:disabled{opacity:.45;cursor:not-allowed}.imageOptionsPanel output{float:right;color:var(--text-secondary);font-weight:400}.imageOptionsPanel p{color:var(--text-secondary);margin:0;font-size:.78rem;line-height:1.45}.processImagesAction{width:100%;margin-top:2px}.checkControl{cursor:pointer;align-items:center;gap:8px;display:flex!important}.checkControl input{width:16px;height:16px;accent-color:var(--primary-color);margin:0}.resizeControls{gap:11px;padding-top:2px;display:grid}.dimensionInputs{grid-template-columns:1fr 1fr;gap:8px;display:grid}.dimensionInputs label{color:#4e5650;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px;font-size:.84rem;font-weight:600;display:grid}.dimensionInputs input{grid-column:1}.dimensionInputs span{color:var(--text-secondary);grid-area:2/2;font-size:.76rem}.imageResults{border-top:1px solid var(--border-subtle);margin-top:clamp(22px,3vw,32px);padding-top:18px}.resultsHeading{justify-content:space-between;align-items:center;gap:16px;margin-bottom:11px;display:flex}.resultsHeading .primaryAction{align-items:center;gap:6px;display:inline-flex}.resultsList{gap:8px;display:grid}.resultRow{border:1px solid var(--border-subtle);background:var(--surface-white);grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;min-width:0;padding:10px;display:grid}.resultMetadata{gap:5px;min-width:0;display:grid}.resultMetadata>strong{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;font-size:.86rem;overflow:hidden}.resultDetails{color:var(--text-secondary);flex-wrap:wrap;gap:3px 0;font-size:.79rem;display:flex}.resultDetails span,.resultDetails strong{align-items:center;display:inline-flex}.resultDetails span:not(:last-of-type):after{color:#9a9a9a;content:"·";margin:0 5px}.resultDetails strong{font-size:inherit;margin-left:6px}.resultSavingsText{color:#12713c}.resultLargerText{color:#a33a1a}.resultNeutralText{color:var(--text-secondary)}.resultSavingsBar{background:#dcebe2;border-radius:3px;width:min(100%,370px);height:6px;overflow:hidden}.resultSavingsBar:before{width:calc(var(--savings-percent) * 1%);content:"";background:#159a52;height:100%;display:block}@media (width<=720px){.imageToolsPage{padding-top:25px}.imageDropzone{gap:13px;min-height:132px;padding:18px}.imageDropzone>svg{width:26px;height:26px}.imageDropzone p{font-size:.84rem}.workspaceSummary{flex-direction:column;align-items:start;gap:5px;min-height:70px}.workspaceSummary .workspaceStatus{text-align:left;max-width:none}.imageWorkspaceLayout{grid-template-columns:1fr}.imageOptionsPanel{order:-1}.commandButton{padding:6px 8px}.commandGroup{padding:5px}}@media (width<=460px){.imageDropzone{flex-wrap:wrap;align-items:flex-start}.imageDropzone .primaryAction{margin-left:39px}.imageCard{grid-template-columns:66px minmax(0,1fr)}.imageThumbnail{width:66px;height:54px}.imageRemoveButton{grid-column:2;justify-self:start;padding-left:0}.resultsHeading{flex-direction:column;align-items:flex-start}.resultRow{grid-template-columns:1fr;gap:4px}.imageDownloadButton{justify-self:start;padding-left:0}}