[hidden]{display:none!important}

.image-converter{
  --converter-border:#d9e1ec;
  --converter-muted:#667085;
  --converter-soft:#f7f9fc;
  --converter-blue:#2563eb;
  max-width:1160px;
  margin-inline:auto;
}

.converter-hero{margin-bottom:28px}
.converter-benefits{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.converter-benefits span{
  display:inline-flex;align-items:center;min-height:34px;padding:0 12px;
  border:1px solid var(--converter-border);border-radius:999px;background:#fff;
  color:#475467;font-size:13px;font-weight:750
}

.converter-layout{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(320px,.68fr);
  gap:22px;align-items:start
}
.converter-form{display:grid;gap:16px}
.converter-card{
  background:#fff;border:1px solid var(--converter-border);border-radius:18px;
  padding:20px;box-shadow:0 7px 24px rgba(16,24,40,.045)
}
.section-heading{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.section-heading h2{margin:0;font-size:20px;color:#172033}
.section-heading p{margin:4px 0 0;color:var(--converter-muted);font-size:14px;line-height:1.45}
.step-badge{
  flex:0 0 32px;width:32px;height:32px;border-radius:10px;
  display:grid;place-items:center;background:#eaf1ff;color:#1d4ed8;font-weight:850
}

.converter-dropzone{
  min-height:210px;border:2px dashed #bfd0e8;border-radius:15px;background:#f9fbff;
  display:grid;place-items:center;align-content:center;gap:7px;text-align:center;padding:24px;
  cursor:pointer;outline:none;transition:.18s border-color,.18s background,.18s box-shadow
}
.converter-dropzone:hover,.converter-dropzone:focus,.converter-dropzone.is-dragover{
  border-color:#2563eb;background:#eef4ff;box-shadow:0 0 0 4px rgba(37,99,235,.08)
}
.converter-dropzone strong{font-size:17px;color:#172033}
.converter-dropzone span{color:#475467}
.converter-dropzone small{color:#7b8797}
.dropzone-icon{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  background:#e4edff;color:#1d4ed8;font-size:24px;font-weight:900;margin-bottom:2px
}
.file-input-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}

.source-file{
  display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center;
  border:1px solid var(--converter-border);border-radius:14px;padding:12px;background:#fbfcfe
}
.source-thumb{
  width:72px;height:72px;border-radius:11px;background:#eef2f7;overflow:hidden;
  display:grid;place-items:center;border:1px solid #e1e6ee
}
.source-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.source-placeholder{font-weight:850;color:#667085}
.source-details{min-width:0;display:grid;gap:4px}
.source-details strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#172033}
.source-details span{font-size:13px;color:var(--converter-muted)}

.format-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.format-option{position:relative;cursor:pointer}
.format-option input{position:absolute;opacity:0;pointer-events:none}
.format-option>span{pointer-events:none}
.format-option{
  min-height:74px;padding:12px;border:1px solid #cfd7e3;border-radius:13px;background:#fff;
  display:grid;align-content:center;gap:3px;transition:.15s border-color,.15s background,.15s box-shadow
}
.format-option:hover{border-color:#9bb6e7;background:#f9fbff}
.format-option:has(input:checked){
  border-color:#2563eb;background:#eef4ff;box-shadow:0 0 0 2px rgba(37,99,235,.08)
}
.format-option:has(input:focus-visible){outline:3px solid rgba(37,99,235,.22);outline-offset:2px}
.format-name{font-weight:850;color:#172033}
.format-extension{font-size:13px;color:var(--converter-muted)}

.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{display:flex;justify-content:space-between;gap:10px;font-weight:750;margin-bottom:8px;color:#172033}
.field input[type=range]{width:100%}
.range-labels{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#7b8797;margin-top:6px}
.field-help{margin:7px 0 0;color:var(--converter-muted);font-size:13px;line-height:1.4}
.color-row{
  min-height:48px;border:1px solid #c7d0dd;border-radius:11px;padding:6px 10px;
  display:flex;align-items:center;gap:12px;background:#fff
}
.color-row input[type=color]{width:42px;height:32px;padding:0;border:0;background:transparent;cursor:pointer}
.color-row output{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#344054}
.checkbox-row{
  display:flex;gap:10px;align-items:flex-start;margin-top:17px;padding-top:16px;border-top:1px solid #e4e7ec;
  cursor:pointer
}
.checkbox-row input{margin-top:4px}
.checkbox-row span{display:grid;gap:2px}
.checkbox-row strong{color:#172033}
.checkbox-row small{color:var(--converter-muted);line-height:1.4}

.converter-submit{min-height:50px;font-size:16px}
.converter-message{margin:0}
.converter-message[data-kind=error]{background:#feeceb;color:#a52118}
.converter-message[data-kind=warning]{background:#fff6df;color:#8a4b00}
.converter-message[data-kind=success]{background:#eaf8ee;color:#176b35}

.converter-progress{display:grid;gap:9px;padding:13px 14px;background:#fff;border:1px solid var(--converter-border);border-radius:12px}
.progress-line{display:flex;align-items:center;gap:9px;color:#475467}
.progress-line strong{margin-left:auto;color:#172033}
.progress-track{height:9px;border-radius:999px;background:#e7ecf2;overflow:hidden}
.progress-track span{display:block;width:0;height:100%;border-radius:999px;background:#2563eb;transition:width .15s ease}

.converter-preview-panel{position:sticky;top:18px;display:grid;gap:14px}
.result-card{padding:16px}
.result-empty{
  min-height:430px;border:1px dashed #cbd5e1;border-radius:15px;background:linear-gradient(180deg,#fbfcfe,#f5f8fc);
  display:grid;place-items:center;align-content:center;text-align:center;padding:24px
}
.result-empty-icon{
  width:78px;height:78px;border-radius:22px;background:#e5edff;color:#1d4ed8;
  display:grid;place-items:center;font-size:31px;font-weight:900;margin-bottom:14px
}
.result-empty h2{max-width:320px;margin:0;font-size:23px;color:#172033;line-height:1.2}
.result-empty p{max-width:330px;margin:10px 0 0;color:var(--converter-muted);line-height:1.55}

.result-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:13px}
.result-kicker{display:block;font-size:11px;font-weight:850;letter-spacing:.08em;color:#2563eb;margin-bottom:3px}
.result-heading h2{margin:0;color:#172033;font-size:21px}
.status-pill{padding:5px 9px;border-radius:999px;background:#eaf8ee;color:#176b35;font-size:12px;font-weight:800}
.result-preview-wrap{
  min-height:300px;border:1px solid #d8e0eb;border-radius:14px;background:
  linear-gradient(45deg,#edf0f4 25%,transparent 25%),linear-gradient(-45deg,#edf0f4 25%,transparent 25%),
  linear-gradient(45deg,transparent 75%,#edf0f4 75%),linear-gradient(-45deg,transparent 75%,#edf0f4 75%);
  background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;
  display:grid;place-items:center;overflow:hidden;padding:12px
}
.result-preview-wrap img{display:block;max-width:100%;max-height:430px;object-fit:contain}
.result-no-preview{text-align:center;display:grid;gap:5px;color:#475467;padding:30px}
.result-no-preview strong{color:#172033}

.conversion-route{
  display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin:14px 0;
  border:1px solid #e3e8ef;border-radius:12px;padding:11px;background:#f9fafb
}
.conversion-route div{display:grid;gap:2px}
.conversion-route div:last-child{text-align:right}
.conversion-route span{font-size:11px;color:#7b8797;text-transform:uppercase;letter-spacing:.05em}
.conversion-route strong{font-size:14px;color:#172033}
.route-arrow{font-size:19px!important;color:#2563eb!important}

.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.result-stats div{padding:10px 11px;border:1px solid #e3e8ef;border-radius:11px;background:#fff;display:grid;gap:3px}
.result-stats span{font-size:11px;color:#7b8797;text-transform:uppercase;letter-spacing:.04em}
.result-stats strong{font-size:14px;color:#172033}

.result-warning-list{display:grid;gap:7px;margin-top:12px}
.result-warning-list div{
  padding:9px 10px;border-radius:9px;border:1px solid #f2d28a;background:#fff7e6;color:#805000;font-size:13px;line-height:1.4
}
.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.result-actions .button{min-height:43px;text-align:center}
.result-expiry{margin:11px 0 0;color:#7b8797;font-size:12px;line-height:1.4}

.backend-note{
  border:1px solid var(--converter-border);border-radius:13px;background:#fff;padding:13px 14px;
  color:#475467;font-size:13px
}
.backend-note strong{color:#172033;margin-right:5px}
.backend-note p{margin:6px 0 0;line-height:1.4}

@media(max-width:900px){
  .converter-layout{grid-template-columns:1fr}
  .converter-preview-panel{position:static}
}
@media(max-width:620px){
  .format-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .option-grid,.result-actions,.result-stats{grid-template-columns:1fr}
  .source-file{grid-template-columns:58px minmax(0,1fr)}
  .source-thumb{width:58px;height:58px}
  .source-file .button{grid-column:1/-1;width:100%}
  .converter-card{padding:16px}
}
@media(prefers-reduced-motion:reduce){
  .image-converter *{scroll-behavior:auto!important;transition:none!important}
}