.image-format-bar{justify-content:center;align-items:end;gap:var(--space-3);grid-template-columns:repeat(2,minmax(180px,240px)) auto;display:grid}.image-format-bar label{gap:var(--space-1);color:var(--muted);font-size:12px;font-weight:500;display:grid}.image-format-bar select,.image-options select{height:36px;padding:0 var(--space-3);border-radius:var(--radius-control);color:var(--ink);background:var(--control);box-shadow:0 0 0 1px var(--control-line);border:0}.format-swap{min-width:104px;height:36px;padding:0 var(--space-3);justify-content:center;align-self:end;align-items:center;gap:var(--space-2);color:var(--ink);background:var(--control);box-shadow:0 0 0 1px var(--control-line);font-size:12px;font-weight:600;text-decoration:none;transition:background .12s,transform .12s;display:inline-flex}.format-swap:hover{background:var(--tint);transform:translateY(-1px)}.image-workspace{background:var(--line);grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;display:grid}.image-pane{background:var(--base);min-width:0}.image-input-pane{background:var(--input-surface)}.image-output-pane{background:var(--output-surface)}.image-drop-target,.image-result-stage{width:100%;min-height:330px;padding:var(--space-4);color:var(--muted);background:0 0;border:0;place-items:center;display:grid;overflow:hidden}.image-drop-target{cursor:pointer;transition:background .12s}.image-drop-target:hover{background:var(--tint)}.image-converter.is-dragging .image-drop-target{z-index:2;box-shadow:inset 0 0 0 2px var(--brand);position:relative}.image-placeholder{justify-items:center;gap:var(--space-2);text-align:center;display:grid}.image-placeholder strong{color:var(--ink);font-size:14px;font-weight:600}.image-placeholder small{font-family:var(--mono);font-size:11px}.image-pane img{object-fit:contain;max-width:100%;max-height:298px;box-shadow:0 0 0 1px var(--line), 0 8px 28px var(--shadow-layer);animation:.18s ease-out both image-result-in;display:block}.image-facts{min-height:58px;padding:var(--space-2) var(--space-3);gap:var(--space-3);border-top:1px solid var(--line);background:var(--elevated);grid-template-columns:repeat(3,minmax(0,1fr));margin:0;display:grid}.image-input-pane .image-facts{grid-template-columns:minmax(0,2fr) minmax(56px,.7fr) minmax(80px,1fr)}.image-facts div{min-width:0}.image-facts dt{color:var(--muted);font-size:10px;font-weight:500}.image-facts dd{color:var(--ink);font-family:var(--mono);text-overflow:ellipsis;white-space:nowrap;margin:2px 0 0;font-size:12px;overflow:hidden}.image-converter>.converter-commandbar{border-top:1px solid var(--line)}.image-converter .image-download-button{min-width:156px;height:44px;padding-inline:var(--space-5);font-size:14px;font-weight:700}.image-warning-list:empty{display:none}.image-options{min-height:52px;padding:0 var(--space-4);justify-content:space-between;align-items:center;gap:var(--space-3);border-top:1px solid var(--line);color:var(--ink);background:var(--recessed);display:flex}.image-options>strong{font-size:13px;font-weight:600}.image-options label{margin-inline-start:auto}.image-options p{color:var(--muted);margin:0;font-size:12px}@keyframes image-result-in{0%{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}@media (width<=680px){.image-format-bar{gap:var(--space-2);grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}.image-format-bar label{gap:var(--space-1);grid-template-columns:1fr;min-width:0}.image-format-bar select,.image-options select,.format-swap{height:44px}.format-swap{min-width:80px;max-width:112px;padding:0 var(--space-2);text-align:center;white-space:normal;font-size:11px;line-height:1.1}.image-workspace{gap:var(--space-3);background:0 0;grid-template-columns:1fr}.image-pane{box-shadow:0 0 0 1px var(--control-line)}.image-drop-target,.image-result-stage{min-height:180px}.image-pane img{max-height:148px}.image-facts{min-height:64px}.image-options{padding:var(--space-2) var(--space-3);align-items:center}.image-options select{max-width:190px}.image-converter .image-download-button{width:100%;min-width:0;padding-inline:var(--space-4);flex:1 0 100%}}