.image-converter{width:100%;min-width:0}.converter-panel{gap:var(--space-6);flex-direction:column;min-width:0;display:flex}.converter-header{gap:var(--space-3);margin-top:var(--space-8);padding-bottom:var(--space-6);text-align:center;flex-direction:column;display:flex}.converter-header h1{font-size:var(--font-size-3xl)}.converter-header p{max-width:680px;color:var(--color-text-secondary);margin-inline:auto}.converter-upload-toolbar{justify-content:space-between;align-items:center;gap:var(--space-3);min-width:0;display:flex}.converter-upload-toolbar>#converter-status{flex:auto;min-width:0}.converter-upload-toolbar>.converter-toolbar{flex:none;margin-left:auto}.converter-toolbar{justify-content:flex-end;align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.converter-toolbar[hidden]{display:none}.converter-toolbar label{color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.converter-toolbar select,.converter-row-format{max-width:100%;padding:var(--space-2) var(--space-3);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-medium);background-color:var(--color-surface-elevated);color:var(--color-text);font:inherit}.converter-toolbar select{width:80px;min-width:80px;padding:var(--space-1) var(--space-2);font-size:var(--font-size-sm)}.converter-toolbar select:disabled,.converter-row-format:disabled{opacity:.7;cursor:not-allowed}.converter-file-input{display:none}.converter-dropzone{justify-content:center;align-items:center;gap:var(--space-2);width:100%;min-height:200px;padding:var(--space-7) var(--space-4);border:2px dashed var(--color-border-strong);border-radius:var(--radius-large);background-color:var(--color-surface-elevated);color:var(--color-text);font:inherit;text-align:center;cursor:pointer;transition:border-color var(--transition-normal) var(--transition-easing), background-color var(--transition-normal) var(--transition-easing);flex-direction:column;display:flex}.converter-dropzone:hover,.converter-dropzone[data-dragging=true]{border-color:var(--color-primary);background-color:var(--color-action-background)}.converter-dropzone:disabled{opacity:.65;cursor:not-allowed}.converter-dropzone[hidden]{display:none}.converter-upload-icon{border:1px solid var(--color-availability-border);border-radius:var(--radius-pill);background-color:var(--color-availability-background);width:48px;height:48px;color:var(--color-availability-text);font-size:var(--font-size-2xl);place-items:center;line-height:1;display:grid}.converter-dropzone-title{font-weight:var(--font-weight-semibold)}.converter-help{color:var(--color-text-secondary);font-size:var(--font-size-sm)}.converter-help sup{vertical-align:super;font-size:.7em;line-height:0}#upload-format.is-format-error,#upload-size.is-format-error{color:var(--color-danger);animation:.3s ease-in-out format-error-shake;display:inline-block}@keyframes format-error-shake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}50%{transform:translate(3px)}75%{transform:translate(-2px)}}.converter-dropzone:focus-visible,.converter-button:focus-visible,.converter-remove-button:focus-visible,.converter-toolbar select:focus-visible,.converter-row-format:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}.converter-status{color:var(--color-text-secondary);line-height:var(--line-height-relaxed);overflow-wrap:anywhere}.converter-upload-error{color:var(--color-danger)}.converter-status:empty,.converter-status[hidden]{display:none}.converter-results{gap:var(--space-4);flex-direction:column;min-width:0;display:flex}.converter-results[hidden]{display:none}.converter-results-header{justify-content:space-between;align-items:center;gap:var(--space-3) var(--space-4);flex-wrap:wrap;display:flex}.converter-results-header h2{margin:0}.converter-results-header>div:first-child{flex:auto;min-width:0}.converter-results-summary{margin-top:var(--space-1);color:var(--color-text-secondary);font-size:var(--font-size-sm)}.converter-actions{justify-content:flex-end;align-items:center;gap:var(--space-2);flex-wrap:wrap;flex:0 auto;min-width:0;padding-top:0;display:flex}.converter-actions-top{order:0}.converter-actions .converter-button{white-space:nowrap;flex:none;min-width:0}.converter-actions .converter-button[hidden]{display:none}.converter-file-list{gap:var(--space-3);min-width:0;margin:0;padding:0;list-style:none;display:grid}.converter-file-item{justify-content:space-between;align-items:center;gap:var(--space-4);min-width:0;padding:var(--space-3) var(--space-4);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-large);background-color:var(--color-surface);display:flex}.converter-file-details{flex:1 1 0;min-width:0;overflow:hidden}.converter-file-topline,.converter-file-bottomline{align-items:baseline;gap:var(--space-1) var(--space-1);flex-wrap:wrap;min-width:0;display:flex}.converter-file-bottomline{margin-top:var(--space-1)}.converter-file-name{min-width:0;max-width:100%;color:var(--color-text);font-weight:var(--font-weight-semibold);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.converter-file-size,.converter-file-meta{color:var(--color-text-muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);flex:none}.converter-file-state{min-width:0;color:var(--color-text-secondary);font-size:var(--font-size-sm);line-height:var(--line-height-normal);overflow-wrap:anywhere}.converter-file-output{color:var(--color-success);font-weight:var(--font-weight-medium)}.converter-file-error{color:var(--color-danger)}.converter-file-controls{justify-content:flex-end;align-items:center;gap:var(--space-2);flex-wrap:nowrap;flex:none;min-width:0;display:flex}.converter-source-format{justify-content:space-between;align-items:center;gap:var(--space-2);width:88px;min-width:0;min-height:36px;padding:var(--space-1) var(--space-2);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-medium);background-color:var(--color-surface-elevated);color:var(--color-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);cursor:not-allowed;user-select:none;flex:0 0 88px;display:inline-flex}.converter-source-format:after{content:"";opacity:.7;border-bottom:1.7px solid;border-right:1.7px solid;flex:none;width:7px;height:7px;transform:rotate(45deg)translateY(-2px)}.converter-direction-control{width:22px;min-width:22px;color:var(--color-primary);flex:0 0 22px;justify-content:center;align-items:center;display:inline-flex}.converter-direction-icon{flex:0 0 20px;width:20px;height:20px;display:block;overflow:visible}.converter-row-format{width:88px;min-width:0;min-height:36px;padding:var(--space-1) var(--space-2);font-size:var(--font-size-sm);line-height:var(--line-height-normal);flex:0 0 88px}.converter-row-format,.converter-row-format:disabled,.converter-row-format.is-completed{background-color:var(--color-surface-elevated);opacity:1}.converter-row-format:not(:disabled){cursor:pointer}.converter-row-format:disabled{cursor:not-allowed}.converter-button{justify-content:center;align-items:center;gap:var(--space-2);min-height:36px;padding:var(--space-1) var(--space-3);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-medium);background-color:var(--color-surface);color:var(--color-text);font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);text-align:center;white-space:nowrap;cursor:pointer;transition:background-color var(--transition-fast) var(--transition-easing), border-color var(--transition-fast) var(--transition-easing), color var(--transition-fast) var(--transition-easing);flex:none;display:inline-flex}.converter-button-icon{flex:0 0 17px;width:17px;height:17px;display:block;overflow:visible}.converter-button-primary{border-color:var(--color-primary);background-color:var(--color-primary);color:var(--color-primary-text)}.converter-button-secondary{border-color:var(--color-border);background-color:var(--color-surface-elevated);color:var(--color-text)}#download-all-button{border-color:var(--color-success);background-color:var(--color-success);color:var(--color-primary-text)}.converter-button:disabled{opacity:.55;cursor:not-allowed}.converter-button[hidden]{display:none}.converter-file-item[data-status=completed] .converter-button{border-color:var(--color-success);background-color:var(--color-success);color:var(--color-primary-text)}.converter-remove-button{border:var(--border-width) solid transparent;border-radius:var(--radius-medium);width:32px;height:36px;color:var(--color-text-muted);font:inherit;font-size:var(--font-size-xl);cursor:pointer;background-color:#0000;flex:0 0 32px;place-items:center;padding:0;line-height:1;display:inline-grid}.converter-remove-button:hover:not(:disabled){border-color:var(--color-border);background-color:var(--color-action-background);color:var(--color-text)}.converter-remove-button:disabled{opacity:.55;cursor:not-allowed}@media (hover:hover) and (pointer:fine){.converter-button-primary:not(:disabled):hover{border-color:var(--color-primary-hover);background-color:var(--color-primary-hover)}.converter-button-secondary:not(:disabled):hover{border-color:var(--color-border-strong);background-color:var(--color-action-background)}#convert-all-button:not(:disabled):hover{border-color:var(--color-primary-hover);background-color:var(--color-primary-hover);color:var(--color-primary-text)}#download-all-button:not(:disabled):hover,.converter-file-item[data-status=completed] .converter-button:not(:disabled):hover{border-color:var(--color-success-hover);background-color:var(--color-success-hover);color:var(--color-primary-text)}}.converter-notes{gap:var(--space-1);flex-direction:column;display:flex}.converter-privacy,.converter-note{align-items:flex-start;gap:var(--space-2);color:var(--color-text-secondary);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);display:flex}.converter-note{gap:var(--space-3)}.converter-privacy>span,.converter-note>span:first-child{line-height:inherit;flex:none}@media (width<=900px){.converter-file-item{align-items:center;gap:var(--space-2);padding:var(--space-3);flex-direction:row}.converter-file-details{flex:1 1 0;min-width:0}.converter-file-controls{flex-wrap:nowrap;flex:none;justify-content:flex-end;gap:6px;padding:0;overflow:visible}.converter-source-format,.converter-row-format{flex-basis:68px;width:68px}.converter-direction-control{flex-basis:18px;width:18px;min-width:18px}.converter-direction-icon{flex-basis:16px;width:16px;height:16px}.converter-file-controls .converter-button{gap:5px;padding-inline:8px}.converter-button-icon{flex-basis:15px;width:15px;height:15px}}@media (width<=767px){.converter-header h1{font-size:var(--font-size-2xl)}.converter-file-item{gap:8px;padding:10px}.converter-file-name{font-size:var(--font-size-sm)}.converter-file-size,.converter-file-meta,.converter-file-state{font-size:12px}.converter-file-controls{gap:4px}.converter-source-format,.converter-row-format{flex-basis:60px;width:60px;min-height:34px;padding-inline:5px;font-size:12px}.converter-direction-control{flex-basis:16px;width:16px;min-width:16px}.converter-direction-icon{flex-basis:15px;width:15px;height:15px}.converter-file-controls .converter-button{gap:4px;min-height:34px;padding-inline:6px;font-size:12px}.converter-file-controls .converter-button-icon{flex-basis:14px;width:14px;height:14px}.converter-remove-button{flex-basis:26px;width:26px;height:34px}.converter-actions{gap:4px;justify-content:initial;flex:0 auto;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;align-items:stretch;width:max-content;min-width:0;max-width:100%;display:inline-grid}.converter-actions .converter-button{flex:initial;white-space:nowrap;justify-content:center;gap:3px;min-width:0;min-height:34px;padding:4px 2px;font-size:clamp(9px,2.1vw,11px);line-height:1.2;display:inline-flex}.converter-actions .converter-button-icon{flex:0 0 12px;width:12px;height:12px}.converter-results-header.is-actions-wrapped{justify-content:center}.converter-results-header.is-actions-wrapped>div:first-child{text-align:center;flex:0 0 100%}.converter-results-header.is-actions-wrapped .converter-results-summary{text-align:center}.converter-results-header.is-actions-wrapped .converter-actions{justify-content:center;margin-inline:auto}}@media (width<=480px){.converter-file-item{gap:5px;padding:8px}.converter-file-details{flex:1 1 0;min-width:0}.converter-file-topline,.converter-file-bottomline{gap:2px;min-width:0}.converter-file-topline{flex-wrap:nowrap;align-items:baseline;gap:4px}.converter-file-topline .converter-file-name{text-overflow:ellipsis;white-space:nowrap;flex:0 auto;min-width:0;max-width:100%;font-size:12px;display:block;overflow:hidden}.converter-file-topline .converter-file-size{white-space:nowrap;flex:none;font-size:11px}.converter-file-size,.converter-file-meta,.converter-file-state{font-size:11px}.converter-file-controls{flex:none;gap:3px}.converter-source-format{flex-basis:48px;width:48px;min-height:32px;padding-inline:3px;font-size:11px}.converter-row-format{flex-basis:58px;width:58px;min-height:32px;padding-inline:4px;font-size:11px}.converter-direction-control{flex-basis:12px;width:12px;min-width:12px}.converter-direction-icon{flex-basis:12px;width:12px;height:12px}.converter-file-controls .converter-button{gap:3px;min-height:30px;padding-inline:4px;font-size:10px;line-height:1.2}.converter-file-controls .converter-button-icon{flex-basis:12px;width:12px;height:12px}.converter-remove-button{flex:0 0 22px;width:22px;height:32px}.converter-dropzone{min-height:180px;padding:var(--space-6) var(--space-3)}.converter-results-header{text-align:center;flex-direction:column;align-items:center}.converter-results-header>div:first-child{text-align:center;width:100%}.converter-results-header .converter-actions{align-self:center;margin-inline:auto}}@media (prefers-reduced-motion:reduce){.converter-dropzone,.converter-button{transition:none}#upload-format.is-format-error,#upload-size.is-format-error{animation:none}}
