.image-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:32px;align-items:start}.image-controls{border:1px solid var(--line);background:#fbfaf5;padding:28px;min-width:0}.image-controls fieldset{border:0;padding:0;margin:0 0 24px;min-width:0}.image-controls legend{font:9px var(--mono);letter-spacing:1.4px;color:#758469;margin-bottom:20px}.image-drop{text-align:center;padding:25px 18px;background:#edf0e5;border:1px dashed #9aaa88;position:relative}.image-drop.is-dragging{background:#dce8cf;outline:2px solid var(--green);outline-offset:3px}.image-upload-symbol{display:inline-grid;place-items:center;width:45px;height:45px;border:1px solid #b4c39f;border-radius:50%;color:var(--green);transform:rotate(180deg)}.image-drop p{font-size:12px;line-height:1.8;color:var(--muted);max-width:265px;margin:14px auto}.image-file-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid #8a9d77;background:#fffef9;padding:11px 19px;font-size:12px;font-weight:600;color:var(--green);cursor:pointer}.image-drop input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}.image-drop:focus-within{outline:2px solid var(--green);outline-offset:3px}.image-drop small{display:block;font-size:10px;line-height:1.7;color:var(--muted);margin-top:13px}.image-file-info{font-size:11px;color:var(--green);overflow-wrap:anywhere;margin-top:12px}.image-controls .image-settings{border-top:1px solid var(--line);padding-top:24px}.image-settings legend{float:left;width:100%}.image-presets{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px;clear:both}.image-presets button{font-size:10px;border:1px solid #c3ceb6;padding:9px;min-height:38px}.image-presets button[aria-pressed=true]{background:var(--green);border-color:var(--green);color:#fff}.image-presets button:disabled{opacity:.4;cursor:not-allowed}.image-settings:disabled{opacity:.5}.image-settings .qr-two-fields{grid-template-columns:1fr 1fr;gap:15px}.image-settings .qr-two-fields .qr-field{margin:0}.image-ratio-hint{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:10px;line-height:1.8;margin:10px 0 23px}.image-quality label{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;margin-bottom:11px}.image-quality output{font:11px var(--mono);color:var(--green)}.image-quality input{width:100%;min-height:30px;accent-color:var(--green);cursor:pointer}.image-quality small{display:block;font-size:10px;line-height:1.8;color:var(--muted);margin-top:6px}.image-controls>.primary-button{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;min-height:48px;font-size:12px;padding:14px 18px}.image-controls>.primary-button:disabled{opacity:.45;cursor:not-allowed}.image-status{min-height:37px;font-size:11px;line-height:1.8;color:var(--green);margin:14px 0}.image-status.is-error{color:#a13e2b}.image-preview-panel{position:sticky;top:100px;background:#e8eddd;border:1px solid #c8d3b8;min-width:0}.image-preview-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #cbd6bd;padding:14px 20px}.image-preview-heading>span{font:9px var(--mono);letter-spacing:1.5px;color:#6a7e56}.image-preview-heading>div{display:flex;gap:4px}.image-preview-heading button{font-size:10px;padding:9px 12px;min-height:36px;border:1px solid transparent}.image-preview-heading button[aria-pressed=true]{background:#fbfaf5;border-color:#c5d0b5}.image-preview-heading button:disabled{opacity:.4;cursor:not-allowed}.image-preview-stage{margin:23px;min-height:300px;height:350px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:repeating-conic-gradient(#edf0e6 0% 25%,#f9faf5 0% 50%) 50%/20px 20px;border:1px solid #d1dac5}.image-preview-stage img{width:100%;height:100%;object-fit:contain}.image-preview-stage [hidden]{display:none!important}#image-empty{text-align:center;padding:30px;max-width:330px}#image-empty>svg{color:#81956d;width:72px;height:72px;margin-bottom:24px}#image-empty h2{font:400 28px/1.2 var(--serif);letter-spacing:-.4px;margin-bottom:12px}#image-empty p{font-size:12px;line-height:1.9;color:var(--muted)}.image-result{padding:0 23px 23px}.image-result dl{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0;padding-bottom:15px;border-bottom:1px solid #c8d3b8}.image-result dt{font:9px var(--mono);letter-spacing:1px;text-transform:uppercase;color:#6e815c;margin-bottom:8px}.image-result dd{margin:0;font-size:11px;line-height:1.7;color:var(--ink)}#image-savings{font-size:12px;line-height:1.8;font-weight:600;color:var(--green);margin:13px 0}#image-savings.is-larger{color:#99502d}.image-result .primary-button{display:flex;justify-content:center;align-items:center;gap:12px;min-height:48px;font-size:12px}.image-result [hidden]{display:none}.image-export-note{font-size:10px;line-height:1.8;color:var(--muted);padding:0 25px 23px}.image-preview-panel .qr-privacy{padding-bottom:12px}.tool-directory-grid{display:grid;gap:22px}.tool-directory-grid .tool-directory-card{max-width:none}.tool-directory-card.image-directory-card{background:#efe7d8;border-color:#d8cbb4}.image-directory-card .tool-directory-icon{color:#926241}.image-directory-card:hover{border-color:#926241}
@media(max-width:1000px){.image-workspace{gap:24px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.image-controls{padding:23px}.image-preview-stage{margin:18px;height:290px;min-height:260px}.image-preview-heading{padding:12px 16px}.image-preview-heading button{padding:8px;font-size:9px}.image-result{padding:0 18px 20px}}
@media(max-width:680px){.image-workspace{grid-template-columns:1fr}.image-controls{padding:25px}.image-preview-panel{position:static}.image-controls legend{font-size:9px}.image-presets button{min-height:42px;font-size:11px}.image-drop p{font-size:13px}.image-drop small{font-size:11px}.image-ratio-hint,.image-quality small{font-size:11px}.image-quality label{font-size:12px}.image-preview-stage{height:320px;margin:22px}.image-preview-heading{padding:15px 22px}.image-preview-heading button{font-size:11px;padding:9px 12px}.image-result{padding:0 22px 22px}.image-result dd{font-size:12px}.image-status{font-size:12px}.image-export-note{font-size:11px}.image-preview-panel .qr-privacy{font-size:11px}.image-page .breadcrumbs{flex-wrap:wrap;line-height:1.7}}