.btn{display:inline-flex;align-items:center;justify-content:center;font-family:inherit;cursor:pointer;transition:all var(--transition-fast)}.btn--primary{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-3) var(--space-6);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:#fff;background:var(--color-primary-600);border:1px solid transparent;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);font-family:inherit}.btn--primary:hover{background:var(--color-primary-700)}.btn--outline{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-3) var(--space-6);font-size:var(--text-sm);font-weight:var(--weight-semibold);background:transparent;color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);font-family:inherit}.btn--outline:hover{background:var(--color-surface-raised);border-color:var(--color-text-muted)}.btn--sm{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}.share-section{margin-top:var(--space-8);text-align:center}.share-support{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-4);font-size:var(--text-sm);color:var(--color-text-muted)}.share-support__icon{display:inline-flex}.share-support__link{color:var(--color-primary-600);font-weight:var(--weight-semibold);text-decoration:none}.share-support__link:hover{text-decoration:underline}.share-section__heading{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-3)}.share-section__buttons{display:flex;align-items:center;justify-content:center;gap:var(--space-2);flex-wrap:wrap}.share-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text-muted);background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-full);text-decoration:none;cursor:pointer;transition:all var(--transition-fast);font-family:inherit}.share-btn:hover{color:var(--color-text);border-color:var(--color-text-muted)}.share-btn__icon{display:inline-flex}.share-more{position:relative}.share-more__dropdown{display:none;position:absolute;bottom:100%;right:0;margin-bottom:var(--space-2);padding:var(--space-2);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);z-index:10;flex-direction:column;gap:var(--space-1);min-width:160px}.share-more__dropdown--open{display:flex}.share-more__dropdown .share-btn{width:100%;justify-content:flex-start;border:none;border-radius:var(--radius-lg);background:transparent}.share-more__dropdown .share-btn:hover{background:var(--color-surface-raised)}.privacy-hint{margin-top:var(--space-6);padding:var(--space-3) var(--space-4);font-size:var(--text-xs);color:var(--color-text-muted);text-align:center;background:var(--color-surface-raised);border-radius:var(--radius-lg);line-height:var(--leading-relaxed)}.imageconverter{max-width:720px;margin-inline:auto}.imageconverter__subtitle{text-align:center;color:var(--color-text-muted);font-size:var(--text-base);line-height:var(--leading-relaxed);margin-bottom:var(--space-8)}.imageconverter-error{padding:var(--space-4);color:var(--color-danger, #ef4444);background:color-mix(in srgb,var(--color-danger, #ef4444) 10%,transparent);border-radius:var(--radius-lg);font-size:var(--text-sm);text-align:center;margin-bottom:var(--space-4)}.imageconverter-configure{display:flex;flex-direction:column;gap:var(--space-6)}.imageconverter-file-list{display:flex;flex-direction:column;gap:var(--space-3)}.imageconverter-file-list__count{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:var(--weight-medium)}.imageconverter-file-list__items{display:flex;flex-direction:column;gap:var(--space-2)}.imageconverter-file-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.imageconverter-file-item__thumb{width:48px;height:48px;object-fit:cover;border-radius:var(--radius-md);flex-shrink:0}.imageconverter-file-item__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}.imageconverter-file-item__name{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.imageconverter-file-item__size{font-size:var(--text-xs);color:var(--color-text-muted)}.imageconverter-options{display:flex;flex-direction:column;gap:var(--space-5)}.imageconverter-options__label{display:block;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text);margin-bottom:var(--space-2)}.imageconverter-options__label--sm{font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text-muted)}.imageconverter-format,.imageconverter-jpegbg{border:none;padding:0;margin:0}.imageconverter-format__group{display:flex;gap:var(--space-2);flex-wrap:wrap}.imageconverter-format__option{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);color:var(--color-text);background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast)}.imageconverter-format__option:hover{border-color:var(--color-text-muted)}.imageconverter-format__option:has(.imageconverter-format__radio:checked){border-color:var(--color-primary-400);background:color-mix(in srgb,var(--color-primary-400) 10%,transparent)}.imageconverter-format__radio{accent-color:var(--color-primary-600)}.imageconverter-format__label{font-weight:var(--weight-medium)}.imageconverter-quality__row{display:flex;align-items:center;gap:var(--space-3)}.imageconverter-quality__slider{flex:1;accent-color:var(--color-primary-600)}.imageconverter-quality__value{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text);min-width:3em;text-align:right}.imageconverter-quality__note{font-size:var(--text-xs);color:var(--color-text-muted);font-style:italic}.imageconverter-resize__toggle{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text);cursor:pointer}.imageconverter-resize__off{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1)}.imageconverter-resize__mode-tabs{display:flex;gap:var(--space-1);margin-bottom:var(--space-2)}.imageconverter-resize__mode-tab{flex:1;padding:var(--space-2) var(--space-3);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text-muted);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);font-family:inherit}.imageconverter-resize__mode-tab:hover{color:var(--color-text);border-color:var(--color-text-muted)}.imageconverter-resize__mode-tab--active{color:var(--color-primary-600);border-color:var(--color-primary-400);background:color-mix(in srgb,var(--color-primary-400) 10%,transparent)}.imageconverter-resize__scale-row{display:flex;align-items:center;gap:var(--space-3)}.imageconverter-resize__scale-slider{flex:1;accent-color:var(--color-primary-600)}.imageconverter-resize__scale-value{min-width:3.5em;text-align:right;font-size:var(--text-sm);font-weight:var(--weight-medium);font-variant-numeric:tabular-nums;color:var(--color-text)}.imageconverter-resize__dims-preview{font-size:var(--text-xs);color:var(--color-text-muted);font-family:var(--font-mono, ui-monospace, monospace);font-variant-numeric:tabular-nums;text-align:center;padding:var(--space-2) 0}.imageconverter-resize__controls{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-3);padding:var(--space-3);background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.imageconverter-resize__preset-row{display:flex;align-items:center;gap:var(--space-3)}.imageconverter-resize__select{flex:1;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);font-family:inherit}.imageconverter-resize__dim-row{display:flex;align-items:flex-end;gap:var(--space-2)}.imageconverter-resize__dim-group{flex:1;display:flex;flex-direction:column;gap:var(--space-1)}.imageconverter-resize__input{width:100%;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);font-family:inherit}.imageconverter-resize__input:focus{outline:none;border-color:var(--color-primary-400);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-400) 20%,transparent)}.imageconverter-resize__lock{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;color:var(--color-text-muted);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);flex-shrink:0;font-family:inherit}.imageconverter-resize__lock:hover{color:var(--color-text);border-color:var(--color-text-muted)}.imageconverter-resize__lock--active{color:var(--color-primary-600);border-color:var(--color-primary-400)}.imageconverter-actions{display:flex;gap:var(--space-3)}.imageconverter-progress{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-8) var(--space-4)}.imageconverter-progress__text{font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--color-text)}.imageconverter-progress__counter{font-size:var(--text-2xl);font-weight:var(--weight-bold);color:var(--color-primary-600)}.imageconverter-progress__list{list-style:none;padding:0;margin:0;width:100%;max-width:480px;display:flex;flex-direction:column;gap:var(--space-2)}.imageconverter-progress__item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--text-sm)}.imageconverter-progress__status{flex-shrink:0;font-size:var(--text-base)}.imageconverter-progress__status--pending{color:var(--color-text-muted)}.imageconverter-progress__status--converting{color:var(--color-primary-600)}.imageconverter-progress__status--converted{color:var(--color-secondary-600)}.imageconverter-progress__status--error{color:var(--color-danger, #ef4444)}.imageconverter-progress__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text)}.imageconverter-progress__error{font-size:var(--text-xs);color:var(--color-danger, #ef4444)}.imageconverter-results{display:flex;flex-direction:column;gap:var(--space-4)}.imageconverter-results__summary{display:flex;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);background:var(--color-surface-raised);border-radius:var(--radius-lg)}.imageconverter-results__stat{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text)}.imageconverter-results__stat--saved{color:var(--color-secondary-700)}[data-theme=dark] .imageconverter-results__stat--saved{color:var(--color-secondary-300)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .imageconverter-results__stat--saved{color:var(--color-secondary-300)}}.imageconverter-results__stat--increased{color:var(--color-text-muted)}.imageconverter-results__zip-btn{align-self:center}.imageconverter-result{padding:var(--space-4);background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-xl);display:flex;flex-direction:column;gap:var(--space-3)}.imageconverter-result--error{border-color:var(--color-danger, #ef4444)}.imageconverter-result__name{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text)}.imageconverter-result__error-msg{font-size:var(--text-xs);color:var(--color-danger, #ef4444)}.imageconverter-comparison{display:flex;align-items:center;gap:var(--space-3)}.imageconverter-comparison__col{flex:1;text-align:center}.imageconverter-comparison__title{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-1)}.imageconverter-comparison__dims{font-size:var(--text-sm);color:var(--color-text)}.imageconverter-comparison__size{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text)}.imageconverter-comparison__thumb{max-width:120px;max-height:90px;border-radius:var(--radius-md);border:1px solid var(--color-border);object-fit:contain;background:var(--color-surface)}.imageconverter-comparison__arrow{font-size:var(--text-xl);color:var(--color-text-muted);flex-shrink:0}.imageconverter-result__badge{display:inline-flex;align-self:flex-start;padding:var(--space-1) var(--space-3);font-size:var(--text-xs);font-weight:var(--weight-medium);border-radius:var(--radius-full)}.imageconverter-result__badge--saved{color:var(--color-secondary-700);background:var(--color-secondary-50)}[data-theme=dark] .imageconverter-result__badge--saved{color:var(--color-secondary-300);background:color-mix(in srgb,var(--color-secondary-800) 30%,transparent)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .imageconverter-result__badge--saved{color:var(--color-secondary-300);background:color-mix(in srgb,var(--color-secondary-800) 30%,transparent)}}.imageconverter-result__badge--increased{color:var(--color-text-muted);background:var(--color-surface);border:1px solid var(--color-border)}@media(max-width:640px){.imageconverter-actions{flex-direction:column}.imageconverter-comparison{flex-direction:column;gap:var(--space-2)}.imageconverter-comparison__arrow{transform:rotate(90deg)}.imageconverter-resize__dim-row{flex-direction:column;align-items:stretch}.imageconverter-resize__lock{align-self:center;transform:rotate(90deg)}.imageconverter-file-item{flex-wrap:wrap}.imageconverter-results__summary{flex-direction:column;gap:var(--space-2)}}