.image-preview{min-height:520px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(45deg,#e7e4dc 25%,transparent 25%) 0 0/20px 20px,linear-gradient(45deg,transparent 75%,#e7e4dc 75%) 0 0/20px 20px,linear-gradient(45deg,transparent 75%,#e7e4dc 75%) 10px -10px/20px 20px,linear-gradient(45deg,#e7e4dc 25%,#f5f3ee 25%) 10px 10px/20px 20px}.image-preview img{max-width:100%;max-height:620px;object-fit:contain}.range-row{display:grid;grid-template-columns:1fr 48px;gap:12px;align-items:center}
.format-picker{margin:22px 0 18px;padding:0;border:0}.format-picker legend{margin-bottom:10px;color:#7d7971;font-size:10.5px}.format-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.format-option{min-height:92px;padding:13px;position:relative;display:grid;align-content:end;border:1px solid var(--tool-line);border-radius:5px;background:rgba(255,255,255,.24);cursor:pointer;transition:.18s}.format-option:hover{border-color:#aaa69d;background:#fff}.format-option:has(input:checked){border-color:var(--tool-ink);background:#fff;box-shadow:inset 0 -3px 0 var(--tool-accent)}.format-option input{position:absolute;top:11px;right:11px;accent-color:var(--tool-accent)}.format-option b{font-size:14px}.format-option small{margin-top:4px;color:#858179;font-size:8px;line-height:1.4}.format-extension{position:absolute;top:12px;left:12px;color:var(--tool-accent);font:600 9px var(--mono)}
.converter-settings{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px}.quality-field>span{display:flex;justify-content:space-between}.quality-field em{color:#9a968e;font-style:normal;font-size:9px}.is-disabled{opacity:.42}.save-row{margin-top:18px;padding-top:17px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--tool-line)}.save-row>div{min-width:0;display:grid;gap:4px}.save-row span{color:#8a867e;font-size:9px}.save-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 11px var(--mono)}.save-row .tool-button{min-width:150px}
@media(max-width:980px){.converter-layout{grid-template-columns:1fr}.image-preview{min-height:360px}}
@media(max-width:560px){.format-picker{grid-template-columns:1fr}.format-option{min-height:72px}.converter-settings{grid-template-columns:1fr 1fr}.converter-settings .field:first-child{grid-column:1/-1}.save-row{align-items:stretch;flex-direction:column}.save-row .tool-button{width:100%}}