.image-workspace { max-width: none; margin-inline: 0; }
.image-workspace .fields { display: grid; gap: 16px; }
.image-dropzone { min-height: 210px; border: 2px dashed #9dbce6; border-radius: 18px; display: grid; place-items: center start; padding: 28px; text-align: left; background: linear-gradient(135deg,#f9fcff,#f0f7ff); transition: .18s ease; cursor: pointer; }
.image-dropzone.is-dragging { border-color: #2563eb; background: #eaf3ff; transform: scale(1.01); }
.image-dropzone strong { display:block; font-size: 1.1rem; margin-bottom: 7px; }.image-dropzone p { margin: 0; color: var(--muted); }.image-dropzone input { display:none; }
.image-dropzone .button { margin-top: 16px; pointer-events:none; }
.image-toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:12px; padding:16px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.image-toolbar .field { flex:1 1 150px; text-align:left; }.image-toolbar label { display:block; margin-bottom:6px; font-size:.87rem; font-weight:700; }.image-toolbar input,.image-toolbar select,.image-toolbar textarea { width:100%; box-sizing:border-box; }
.image-toolbar input[type=range] { accent-color:#2563eb; }.image-toolbar output { color:#2563eb; font-weight:700; float:right; }
.image-preview { min-height: 220px; display:flex; justify-content:flex-start; align-items:center; overflow:hidden; padding:18px; border: 1px solid var(--line); border-radius: 16px; background: repeating-conic-gradient(#f5f7fa 0 25%,#fff 0 50%) 50% / 24px 24px; color:var(--muted); }
.image-preview img,.image-preview canvas { display:block; max-width:100%; max-height:520px; object-fit:contain; }.image-preview canvas { cursor:crosshair; }
.image-preview .empty-state { text-align:left; padding:30px 0; }.image-preview .empty-state span { display:block; font-size:2rem; margin-bottom:8px; }
.image-meta { color:var(--muted); font-size:.88rem; text-align:left; margin:0; }.image-actions { display:flex; justify-content:flex-start; flex-wrap:wrap; gap:10px; margin-top:16px; }
.image-workspace .result-wrap { margin-top:16px; }.image-workspace textarea { min-height:110px; }
.image-workspace.is-image-conversion .result-wrap { display:none; }
.image-analysis-workspace > .image-preview[hidden] { display:none !important; min-height:0; padding:0; border:0; }
.image-analysis-workspace { padding:28px; }.image-analysis-workspace .image-dropzone { min-height:220px; }.image-analysis-workspace.has-image-analysis { display:grid; grid-template-columns:minmax(280px,.74fr) minmax(360px,1.26fr); grid-template-areas:"fields preview" "fields details" "status details"; align-items:start; column-gap:32px; row-gap:16px; }.image-analysis-workspace.has-image-analysis > .fields { grid-area:fields; position:sticky; top:18px; }.image-analysis-workspace.has-image-analysis > .image-preview { grid-area:preview; min-height:0; padding:0; border:0; border-radius:14px; background:transparent; color:inherit; justify-content:flex-start; }.image-analysis-workspace.has-image-analysis > .image-preview img,.image-analysis-workspace.has-image-analysis > .image-preview canvas { width:auto; max-width:100%; max-height:420px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 10px 28px #0f172a0d; }.image-analysis-workspace.has-image-analysis > .image-palette,.image-analysis-workspace.has-image-analysis > .image-metadata,.image-analysis-workspace.has-image-analysis > .image-color-picker-panel { grid-area:details; width:100%; margin:0; box-sizing:border-box; }.image-analysis-workspace.has-image-analysis > .image-palette { min-height:74px; box-shadow:0 6px 18px #0f172a0a; }.image-analysis-workspace.has-image-analysis > .image-metadata { border-radius:14px; box-shadow:0 8px 24px #0f172a0a; }.image-analysis-workspace.has-image-analysis > .image-metadata div { grid-template-columns:minmax(140px,.72fr) minmax(0,1.28fr); }.image-analysis-workspace.has-image-analysis > .image-metadata b { background:#f5f8fd; }.image-analysis-workspace.has-image-analysis > #image-status { grid-area:status; margin:0; min-height:1.5em; color:var(--muted); text-align:left; }.image-analysis-workspace.has-image-analysis .image-color-picker-panel { box-shadow:0 8px 24px #0f172a0a; }.image-analysis-workspace.has-image-analysis .picker-palette-swatch { height:76px; }
.image-workspace.is-image-conversion .image-preview { display:none !important; }
.image-workspace.is-image-conversion .actions { display:none; }
.image-workspace.is-image-compressor:not(.has-compressor-image) > .image-preview,.image-workspace.is-image-compressor:not(.has-compressor-image) > .actions,.image-workspace.is-image-compressor:not(.has-compressor-image) > .result-wrap,.image-workspace.is-image-compressor:not(.has-compressor-image) > #image-status { display:none; }
.image-workspace.is-image-compressor .result-wrap { display:none; }.image-workspace.is-image-compressor #image-clear { display:none !important; }.compressor-controls { margin-top:16px; }.compressor-controls .field { max-width:420px; }.compressor-controls output { float:right; }
.image-workspace.is-image-processing:not(.has-image-processing) > .image-preview,.image-workspace.is-image-processing:not(.has-image-processing) > .actions,.image-workspace.is-image-processing:not(.has-image-processing) > .result-wrap,.image-workspace.is-image-processing:not(.has-image-processing) > #image-status { display:none; }
.image-workspace.is-image-processing { padding:28px; }.image-workspace.is-image-processing .result-wrap { display:none; }
.image-workspace.is-image-processing .image-toolbar { border:0; border-radius:0; padding:4px 0 0; background:transparent; }
.image-workspace.is-image-processing .compressor-controls { margin-top:0; }.image-workspace.is-image-processing .compressor-controls .field { width:min(100%,460px); max-width:none; }.image-workspace.is-image-processing .compressor-controls label { margin-bottom:10px; }.image-workspace.is-image-processing .compressor-controls input[type=range] { width:100%; }
.image-workspace.is-image-processing.has-image-processing { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.72fr); grid-template-areas:"fields preview" "actions status"; align-items:start; column-gap:30px; row-gap:18px; }
.image-workspace.is-image-processing.has-image-processing .fields { grid-area:fields; gap:20px; }.image-workspace.is-image-processing.has-image-processing .image-preview { grid-area:preview; min-height:280px; justify-content:center; padding:0; border:0; border-radius:0; background:transparent; }.image-workspace.is-image-processing.has-image-processing .image-preview img { max-height:390px; border-radius:10px; }.image-workspace.is-image-processing.has-image-processing .actions { grid-area:actions; margin:0; }.image-workspace.is-image-processing.has-image-processing #image-status { grid-area:status; align-self:center; margin:0; text-align:right; }
.image-workspace.is-image-resizer:not(.has-resizer-image) > .image-preview,.image-workspace.is-image-resizer:not(.has-resizer-image) > .actions,.image-workspace.is-image-resizer:not(.has-resizer-image) > .result-wrap,.image-workspace.is-image-resizer:not(.has-resizer-image) > #image-status { display:none; }
.image-workspace.is-image-resizer .result-wrap { display:none; }.resizer-controls { display:block; }.resizer-controls .resize-mode { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }.resizer-controls .resize-mode label { display:flex; align-items:center; gap:6px; padding:8px 10px; border:1px solid var(--line); border-radius:7px; cursor:pointer; white-space:nowrap; }.resizer-controls .resize-panel { display:flex; align-items:end; flex-wrap:wrap; gap:12px; }.resizer-controls .resize-panel[hidden] { display:none; }.resizer-controls .field { flex:1 1 160px; }.resizer-controls .size-slider { display:grid; grid-template-columns:auto minmax(160px,360px) 52px; align-items:center; gap:10px; width:min(100%,520px); }.resizer-controls .size-slider input { width:100%; accent-color:var(--brand); }.resizer-controls .size-slider output { color:var(--brand); font-weight:700; text-align:right; }.resizer-controls small { width:100%; color:var(--muted); font-size:.82rem; }.resizer-controls .resize-target { display:block; margin-top:12px; color:var(--brand); font-size:.9rem; font-weight:700; }.resizer-controls .aspect-option { display:flex; align-items:center; gap:7px; padding:11px 0; font-size:.9rem; white-space:nowrap; }
.image-workspace.is-image-resizer .image-preview { flex-direction:column; align-items:flex-start; }.image-workspace.is-image-resizer .resized-preview-label { align-self:flex-start; margin:0 0 10px; padding:5px 9px; border-radius:6px; background:#eff6ff; color:var(--brand); font-size:.8rem; font-weight:700; }
.image-workspace.is-base64-tool > .image-preview,.image-workspace.is-base64-tool > .actions,.image-workspace.is-base64-tool > .result-wrap,.image-workspace.is-base64-tool > #image-status { display:none; }
.base64-tool { max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:12px; text-align:left; }.base64-tool h2,.base64-tool p { margin:0; }.base64-tool h2,.base64-tool > p { text-align:center; }.base64-tool > p { color:var(--muted); font-size:.9rem; }.base64-tool label { font-size:.88rem; font-weight:700; }.base64-tool textarea { width:100%; min-height:180px; border:1px solid var(--line); border-radius:9px; padding:12px; font:13px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; resize:vertical; }.base64-tool img { display:block; max-width:100%; max-height:360px; object-fit:contain; margin:2px auto; border:1px solid var(--line); border-radius:9px; }.base64-tool img[hidden] { display:none; }.base64-tool .button { align-self:center; }.base64-tool .status { min-height:1.5em; }
.image-conversion-results { display:grid; gap:10px; margin-top:16px; }
.image-conversion-result { display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:13px; margin:0; padding:10px; border:1px solid var(--line); border-radius:12px; background:#fff; text-align:left; }
.image-conversion-result img { width:64px; height:52px; border:1px solid var(--line); border-radius:7px; object-fit:cover; background:var(--wash); }
.image-conversion-result strong,.image-conversion-result span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.image-conversion-result strong { font-size:.9rem; }.image-conversion-result span { margin-top:2px; color:var(--muted); font-size:.8rem; }.image-conversion-result .button { padding:8px 12px; font-size:.84rem; }
.image-palette { display:flex; margin-top:14px; overflow:hidden; border-radius:11px; border:1px solid var(--line); }.image-swatch { flex:1; min-width:58px; height:72px; padding:0; border:0; cursor:pointer; position:relative; }.image-swatch span { position:absolute; bottom:5px; left:0; right:0; font-size:10px; font-weight:700; color:#fff; text-shadow:0 1px 3px #000; }
.image-workspace[data-image-tool="image-color-picker"] .image-preview { min-height:0; padding:0; border:0; background:transparent; cursor:crosshair; }.image-color-picker-panel { display:grid; gap:14px; width:min(100%,720px); margin-top:16px; padding:18px; border:1px solid var(--line); border-radius:16px; background:#fff; text-align:left; }.picker-selected { display:flex; align-items:center; gap:12px; }.picker-swatch { width:48px; height:48px; flex:0 0 48px; border:1px solid #0002; border-radius:12px; background:#000; }.picker-selected small,.picker-selected strong { display:block; }.picker-selected small,.picker-instruction { color:var(--muted); font-size:.84rem; }.picker-selected strong { margin-top:2px; font-size:1.15rem; color:var(--ink); }.picker-copy { margin-left:auto; }.picker-values { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.picker-values button { min-width:0; padding:11px; border:1px solid var(--line); border-radius:10px; background:#f8fbff; text-align:left; cursor:pointer; }.picker-values button:hover { border-color:var(--brand); background:#eff6ff; }.picker-values span,.picker-values b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.picker-values span { color:var(--muted); font-size:.74rem; font-weight:700; }.picker-values b { margin-top:4px; color:var(--ink); font-size:.84rem; }.picker-instruction { margin:0; }
.picker-palette { display:grid; gap:10px; padding-top:2px; }.picker-palette strong { color:var(--ink); }.picker-palette p { margin:3px 0 0; color:var(--muted); font-size:.84rem; }.picker-palette-swatches { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); overflow:hidden; border:1px solid var(--line); border-radius:11px; }.picker-palette-swatch { min-width:0; height:72px; padding:0; border:0; cursor:pointer; position:relative; }.picker-palette-swatch:hover,.picker-palette-swatch:focus-visible { outline:3px solid var(--brand); outline-offset:-3px; z-index:1; }.picker-palette-swatch span { position:absolute; right:3px; bottom:4px; left:3px; overflow:hidden; color:#fff; font-size:10px; font-weight:700; text-align:center; text-overflow:ellipsis; text-shadow:0 1px 3px #000; white-space:nowrap; }
.image-picker-loading,.image-picker-error { width:100%; padding:26px; border:1px dashed var(--line); border-radius:14px; background:#f8fbff; color:var(--muted); text-align:center; }.image-picker-error { border-color:#f3b3b3; background:#fff7f7; color:#a63d3d; }
.image-metadata { margin-top:14px; border:1px solid var(--line); border-radius:12px; overflow:hidden; text-align:left; }.image-metadata div { display:grid; grid-template-columns:minmax(130px,.7fr) minmax(0,1.3fr); border-bottom:1px solid var(--line); }.image-metadata div:last-child { border:0; }.image-metadata b,.image-metadata span { padding:10px 12px; overflow-wrap:anywhere; }.image-metadata b { background:#f7faff; color:var(--muted); }
.image-crop-hint { font-size:.86rem; color:var(--muted); margin:0; text-align:center; }.image-watermark-note { margin:0; color:var(--muted); font-size:.86rem; }
.crop-ratio-field small { display:block; margin-top:7px; color:var(--muted); font-size:.82rem; font-weight:400; }.image-workspace[data-image-tool="image-cropper"] .image-preview { align-items:center; }.crop-stage { position:relative; display:inline-block; max-width:100%; line-height:0; touch-action:none; user-select:none; }.crop-stage>img { display:block; max-width:100%; max-height:390px; object-fit:contain; }.crop-selection { position:absolute; box-sizing:border-box; border:2px solid #fff; box-shadow:0 0 0 9999px #0f172a80; cursor:move; touch-action:none; }.crop-selection::after { content:""; position:absolute; inset:0; border:1px solid #2563eb; }.crop-handle { position:absolute; z-index:2; width:13px; height:13px; border:2px solid #2563eb; border-radius:50%; background:#fff; box-shadow:0 1px 3px #14213d33; }.crop-nw { top:-7px; left:-7px; cursor:nwse-resize; }.crop-ne { top:-7px; right:-7px; cursor:nesw-resize; }.crop-sw { bottom:-7px; left:-7px; cursor:nesw-resize; }.crop-se { right:-7px; bottom:-7px; cursor:nwse-resize; }.crop-rule { position:absolute; z-index:1; background:#fff8; pointer-events:none; }.crop-rule-v { top:0; bottom:0; left:50%; width:1px; }.crop-rule-h { left:0; right:0; top:50%; height:1px; }
.image-workspace[data-image-tool="image-rotator"] .image-preview { min-height:300px; }.rotator-controls { display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px; }.rotator-quick-actions { display:flex; flex-wrap:wrap; gap:10px; }.rotator-angle { display:grid; grid-template-columns:auto minmax(160px,360px) 46px; align-items:center; gap:10px; width:100%; }.rotator-angle span { font-size:.9rem; font-weight:700; white-space:nowrap; }.rotator-angle input { width:100%; accent-color:var(--brand); }.rotator-angle output { color:var(--brand); font-weight:700; text-align:right; }.rotator-controls small { grid-column:1 / -1; color:var(--muted); font-size:.82rem; }.rotator-preview-canvas { max-width:100%; max-height:390px; object-fit:contain; }
.image-workspace[data-image-tool="image-watermark"] .image-preview { align-items:center; }.watermark-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:18px; }.watermark-tabs,.watermark-mode-panel,.watermark-positions,.watermark-controls>small { grid-column:1 / -1; }.watermark-tabs { display:flex; gap:8px; flex-wrap:wrap; padding-bottom:2px; border-bottom:1px solid var(--line); }.watermark-tabs label { display:flex; align-items:center; gap:7px; margin:0; padding:10px 13px; border:1px solid transparent; border-radius:9px 9px 0 0; color:var(--muted); cursor:pointer; }.watermark-tabs label:has(input:checked) { border-color:var(--line); border-bottom-color:#fff; color:var(--brand); background:#fff; font-weight:700; }.watermark-mode-panel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:16px; border:1px solid var(--line); border-radius:12px; background:#fafcff; }.watermark-mode-panel .field { min-width:0; }.watermark-range { display:grid; grid-template-columns:90px minmax(100px,1fr) 45px; align-items:center; gap:9px; font-size:.9rem; font-weight:700; }.watermark-range input { width:100%; accent-color:var(--brand); }.watermark-range output { color:var(--brand); text-align:right; }.watermark-file { display:grid; gap:7px; font-size:.9rem; font-weight:700; }.watermark-file input { max-width:100%; }.watermark-positions { display:grid; grid-template-columns:80px repeat(3,34px); gap:6px; align-items:center; }.watermark-positions span { font-size:.9rem; font-weight:700; }.watermark-positions button { height:31px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--brand); cursor:pointer; font:inherit; }.watermark-positions button:hover { border-color:var(--brand); background:#eff6ff; }.watermark-controls small { color:var(--muted); font-size:.82rem; }.watermark-stage { position:relative; display:inline-block; max-width:100%; line-height:0; }.watermark-stage>img { display:block; max-width:100%; max-height:390px; object-fit:contain; }.watermark-overlay { position:absolute; z-index:2; max-width:70%; line-height:1.1; padding:3px 5px; color:#fff; font-weight:700; white-space:nowrap; text-shadow:0 1px 3px #000; cursor:move; touch-action:none; user-select:none; }.watermark-overlay[src] { padding:0; filter:drop-shadow(0 1px 2px #0005); object-fit:contain; }
.watermark-controls .watermark-positions { display:none; }
.image-workspace[data-image-tool="blur-image"] .image-toolbar,.image-workspace[data-image-tool="sharpen-image"] .image-toolbar,.image-workspace[data-image-tool="black-and-white-image"] .image-toolbar { width:min(100%,520px); }.blur-strength-control,.sharpen-strength-control,.black-white-strength-control { flex:1 1 100% !important; }.blur-strength-control label,.sharpen-strength-control label,.black-white-strength-control label { display:flex !important; align-items:center; justify-content:space-between; margin-bottom:10px !important; }.blur-strength-control output,.sharpen-strength-control output,.black-white-strength-control output { float:none !important; color:var(--brand); font-weight:700; }.blur-strength-control input[type="range"],.sharpen-strength-control input[type="range"],.black-white-strength-control input[type="range"] { width:100%; accent-color:var(--brand); }.blur-strength-control small,.sharpen-strength-control small,.black-white-strength-control small { display:block; margin-top:8px; color:var(--muted); font-size:.82rem; font-weight:400; }
.image-workspace[data-image-tool="blur-image"] .effect-preview-canvas,.image-workspace[data-image-tool="blur-image"] .effect-preview-result,.image-workspace[data-image-tool="sharpen-image"] .effect-preview-canvas,.image-workspace[data-image-tool="sharpen-image"] .effect-preview-result { display:block; max-width:100%; max-height:390px; object-fit:contain; }
.image-workspace[data-image-tool="invert-image"].has-image-processing { grid-template-areas:"fields preview" "actions preview" ". status"; row-gap:10px; }.image-workspace[data-image-tool="invert-image"].has-image-processing .actions { margin-top:0; align-self:start; }
.image-workspace[data-image-tool="adjust-image-brightness"] .image-toolbar,.image-workspace[data-image-tool="adjust-image-contrast"] .image-toolbar,.image-workspace[data-image-tool="image-opacity"] .image-toolbar { width:min(100%,520px); }.brightness-control,.contrast-control,.opacity-control { flex:1 1 100% !important; }.brightness-control label,.contrast-control label,.opacity-control label { display:flex !important; align-items:center; justify-content:space-between; margin-bottom:10px !important; }.brightness-control output,.contrast-control output,.opacity-control output { float:none !important; color:var(--brand); font-weight:700; }.brightness-control input[type="range"],.contrast-control input[type="range"],.opacity-control input[type="range"] { width:100%; accent-color:var(--brand); }.brightness-control small,.contrast-control small,.opacity-control small { display:block; margin-top:8px; color:var(--muted); font-size:.82rem; font-weight:400; }.image-workspace[data-image-tool="adjust-image-brightness"].has-image-processing,.image-workspace[data-image-tool="adjust-image-contrast"].has-image-processing,.image-workspace[data-image-tool="image-opacity"].has-image-processing { grid-template-areas:"fields preview" "actions preview" ". status"; row-gap:10px; }.image-workspace[data-image-tool="adjust-image-brightness"].has-image-processing .fields,.image-workspace[data-image-tool="adjust-image-contrast"].has-image-processing .fields,.image-workspace[data-image-tool="image-opacity"].has-image-processing .fields { gap:12px; }.image-workspace[data-image-tool="adjust-image-brightness"].has-image-processing .actions,.image-workspace[data-image-tool="adjust-image-contrast"].has-image-processing .actions,.image-workspace[data-image-tool="image-opacity"].has-image-processing .actions { margin-top:0; align-self:start; }
.image-workspace[data-image-tool="circle-crop-image"] .image-preview { align-items:center; }.circle-crop-controls { width:min(100%,520px); }.circle-crop-stage .circle-crop-selection,.circle-crop-stage .circle-crop-selection::after { border-radius:50%; }.circle-crop-stage .crop-rule { display:none; }.circle-crop-stage .crop-nw { top:12%; left:12%; }.circle-crop-stage .crop-ne { top:12%; right:12%; }.circle-crop-stage .crop-sw { bottom:12%; left:12%; }.circle-crop-stage .crop-se { right:12%; bottom:12%; }
.image-workspace[data-image-tool="image-watermark"].has-image-processing,.image-workspace[data-image-tool="add-text-to-image"].has-image-processing { grid-template-columns:minmax(380px,1fr) minmax(320px,.85fr); grid-template-areas:"fields preview" "actions status"; }.image-workspace[data-image-tool="image-watermark"].has-image-processing .fields,.image-workspace[data-image-tool="add-text-to-image"].has-image-processing .fields { grid-area:fields; }.image-workspace[data-image-tool="image-watermark"].has-image-processing .image-preview,.image-workspace[data-image-tool="add-text-to-image"].has-image-processing .image-preview { grid-area:preview; justify-content:center; align-self:start; }.image-workspace[data-image-tool="image-watermark"].has-image-processing .actions,.image-workspace[data-image-tool="add-text-to-image"].has-image-processing .actions { grid-area:actions; }.image-workspace[data-image-tool="image-watermark"].has-image-processing #image-status,.image-workspace[data-image-tool="add-text-to-image"].has-image-processing #image-status { grid-area:status; }
@media (max-width:700px) { .image-workspace.is-image-processing { padding:18px; }.image-workspace.is-image-processing.has-image-processing { grid-template-columns:1fr; grid-template-areas:"fields" "preview" "actions" "status"; gap:18px; }.image-workspace.is-image-processing.has-image-processing .image-preview { min-height:0; }.image-workspace.is-image-processing.has-image-processing #image-status { text-align:left; }.image-workspace[data-image-tool="image-watermark"].has-image-processing { grid-template-columns:1fr; grid-template-areas:"fields" "preview" "actions" "status"; }.image-workspace[data-image-tool="invert-image"].has-image-processing,.image-workspace[data-image-tool="adjust-image-brightness"].has-image-processing,.image-workspace[data-image-tool="adjust-image-contrast"].has-image-processing,.image-workspace[data-image-tool="image-opacity"].has-image-processing { grid-template-areas:"fields" "preview" "actions" "status"; row-gap:18px; } }
@media (max-width:700px) { .image-analysis-workspace { padding:18px; }.image-analysis-workspace.has-image-analysis { grid-template-columns:1fr; grid-template-areas:"fields" "preview" "details" "status"; gap:18px; }.image-analysis-workspace.has-image-analysis > .fields { position:static; }.image-analysis-workspace.has-image-analysis > .image-preview img,.image-analysis-workspace.has-image-analysis > .image-preview canvas { max-height:360px; }.image-analysis-workspace.has-image-analysis > .image-metadata div { grid-template-columns:1fr; } }
@media (max-width:600px) { .image-toolbar { padding:12px; }.image-toolbar .field { flex-basis:100%; }.image-metadata div { grid-template-columns:1fr; }.image-workspace .actions { flex-wrap:wrap; }.image-conversion-result { grid-template-columns:52px minmax(0,1fr); }.image-conversion-result img { width:52px;height:44px; }.image-conversion-result .button { grid-column:2; justify-self:start; }.rotator-controls { grid-template-columns:1fr; }.rotator-angle { grid-template-columns:1fr 42px; }.rotator-angle span { grid-column:1 / -1; }.watermark-controls,.watermark-mode-panel { grid-template-columns:1fr; } }