.image-resizer{background:var(--base);box-shadow:0 0 0 1px var(--line);overflow:hidden}.resizer-filebar{min-height:54px;padding:var(--space-2) var(--space-3);align-items:center;gap:var(--space-3);border-bottom:1px solid var(--line);background:var(--elevated);grid-template-columns:auto minmax(0,1fr) auto;display:grid}.filebar-summary{align-items:baseline;gap:var(--space-3);min-width:0;display:flex}.filebar-summary strong,.filebar-summary span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.filebar-summary strong{color:var(--ink);font-size:13px}.filebar-summary span{color:var(--muted);font-family:var(--mono);font-size:11px}.resizer-workspace{grid-template-columns:310px minmax(0,1fr);min-height:460px;display:grid}.resizer-settings{border-inline-end:1px solid var(--line);background:var(--recessed)}.resizer-settings fieldset{width:100%;box-sizing:border-box;min-inline-size:0;height:100%;padding:var(--space-4);border:0;margin:0}.resizer-settings fieldset:disabled{opacity:.48}.resizer-settings legend{width:100%;margin:0 0 var(--space-3);color:var(--ink);padding:0;font-size:13px;font-weight:700}.image-resizer .mode-switch{box-sizing:border-box;background:var(--control-line);grid-template-columns:1fr 1fr;gap:1px;width:100%;padding:1px;display:grid}.mode-switch label{min-width:0;position:relative}.mode-switch input{opacity:0;position:absolute;inset:0}.mode-switch span{min-height:36px;color:var(--muted);background:var(--control);cursor:pointer;place-items:center;font-size:12px;font-weight:600;display:grid}.mode-switch input:checked+span{color:var(--ink);background:var(--base);box-shadow:inset 0 -2px 0 var(--brand)}.mode-switch input:focus-visible+span{outline:2px solid var(--focus);outline-offset:1px}.dimension-controls{margin-top:var(--space-3);gap:var(--space-2);grid-template-columns:1fr 1fr;display:grid}.dimension-controls label,.percentage-control,.output-control,.quality-control{gap:var(--space-2);color:var(--ink);font-size:12px;font-weight:600;display:grid}.number-field{background:var(--control);height:38px;box-shadow:0 0 0 1px var(--control-line);grid-template-columns:minmax(0,1fr) auto;align-items:center;display:grid}.number-field input{width:100%;height:100%;padding:0 var(--space-2);color:var(--ink);font-family:var(--mono);background:0 0;border:0;outline:none;font-size:13px}.number-field:focus-within{box-shadow:0 0 0 2px var(--focus)}.number-field small{color:var(--muted);font-family:var(--mono);padding-inline-end:var(--space-2);font-size:10px}.percentage-control{margin-top:var(--space-3)}.check-control{align-items:center;gap:var(--space-2);min-height:36px;color:var(--ink);cursor:pointer;font-size:12px;display:flex}.check-control:first-of-type{margin-top:var(--space-2)}.check-control input{width:16px;height:16px;accent-color:var(--brand)}.setting-divider{height:1px;margin:var(--space-3) calc(var(--space-4) * -1);background:var(--line)}.quick-size-group>strong{margin-bottom:var(--space-2);color:var(--ink);font-size:12px;display:block}.quick-size-grid{gap:var(--space-1);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.quick-size-grid button{min-height:34px;padding:var(--space-1) var(--space-2);color:var(--muted);background:var(--control);box-shadow:0 0 0 1px var(--control-line);cursor:pointer;border:0;font-family:inherit;font-size:10px;transition:color .12s,background .12s,transform .12s}.quick-size-grid button:hover{color:var(--ink);background:var(--tint);transform:translateY(-1px)}.quick-size-grid .quick-size-original{grid-column:1/-1}.output-control select{height:38px;padding:0 34px 0 var(--space-2);color:var(--ink);background:var(--control);box-shadow:0 0 0 1px var(--control-line);border:0;border-radius:0;font-family:inherit}.quality-control{margin-top:var(--space-3)}.quality-control>span,.quality-control>small{justify-content:space-between;gap:var(--space-3);display:flex}.quality-control output,.quality-control small{color:var(--muted);font-family:var(--mono);font-size:10px}.quality-control input{width:100%;accent-color:var(--brand)}.target-summary{min-height:34px;margin-top:var(--space-3);padding:var(--space-2);color:var(--ink);background:var(--base);box-shadow:0 0 0 1px var(--line);font-family:var(--mono);place-items:center;font-size:12px;font-weight:700;display:grid}.resizer-preview{background:var(--line);grid-template-columns:1fr 1fr;gap:1px;min-width:0;display:grid}.preview-pane{background:var(--base);grid-template-rows:auto minmax(0,1fr) auto;min-width:0;display:grid}.preview-original{background:var(--input-surface)}.preview-result{background:var(--output-surface)}.preview-heading{min-height:42px;padding:0 var(--space-3);justify-content:space-between;align-items:center;gap:var(--space-3);border-bottom:1px solid var(--line);display:flex}.preview-heading strong{color:var(--ink);font-size:12px}.preview-heading span{color:var(--muted);font-family:var(--mono);font-size:10px}.preview-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}.preview-input{cursor:pointer;transition:background .12s}.preview-input:hover{background:var(--tint)}.image-resizer.is-dragging .preview-input{box-shadow:inset 0 0 0 2px var(--brand)}.preview-placeholder{justify-items:center;gap:var(--space-2);text-align:center;display:grid}.preview-placeholder strong{color:var(--ink);font-size:13px}.preview-placeholder small{max-width:240px;font-size:11px;line-height:1.5}.preview-stage img{object-fit:contain;max-width:100%;max-height:300px;box-shadow:0 0 0 1px var(--line), 0 10px 30px var(--shadow-layer);animation:.18s ease-out both resizer-result-in;display:block}.preview-facts{min-height:58px;padding:var(--space-2) var(--space-3);align-items:center;gap:var(--space-2);border-top:1px solid var(--line);background:var(--elevated);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.preview-original .preview-facts{grid-template-columns:1fr 1fr}.preview-facts span{gap:2px;min-width:0;display:grid}.preview-facts small{color:var(--muted);font-size:9px}.preview-facts strong{color:var(--ink);font-family:var(--mono);text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.image-resizer>.converter-commandbar{border-top:1px solid var(--line)}.resizer-warnings:empty{display:none}.resizer-download{min-width:180px;height:44px;padding-inline:var(--space-5);font-size:14px;font-weight:700}@keyframes resizer-result-in{0%{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.quick-size-grid button,.preview-stage img{transition:none;animation:none}}@media (width<=820px){.resizer-workspace{grid-template-columns:280px minmax(0,1fr)}.resizer-preview{grid-template-columns:1fr}.preview-stage{min-height:190px}.preview-stage img{max-height:160px}}@media (width<=680px){.resizer-filebar{gap:var(--space-2);grid-template-columns:auto minmax(0,1fr) auto;min-height:60px}.resizer-filebar .text-button{min-height:44px}.filebar-summary span{display:none}.resizer-workspace{grid-template-columns:1fr}.resizer-settings{border-inline-end:0;border-bottom:1px solid var(--line)}.resizer-settings fieldset{padding:var(--space-3)}.mode-switch span,.number-field,.output-control select,.check-control,.quick-size-grid button{min-height:44px}.setting-divider{margin-inline:calc(var(--space-3) * -1)}.resizer-preview{gap:var(--space-3);padding:var(--space-3);background:0 0;grid-template-columns:1fr}.preview-pane{box-shadow:0 0 0 1px var(--line)}.preview-stage{min-height:180px}.preview-result .preview-stage{min-height:140px}.resizer-download{flex:1 0 100%;width:100%;min-width:0}}