.image-v1-workspace.is-format-converter .image-v1-panel button,
.image-v1-workspace.is-format-converter .image-v1-panel a,
.image-v1-workspace.is-format-converter .image-tool-action{border-radius:5px}

.image-v1-workspace.is-format-converter .image-drop{border-radius:8px}
.image-v1-workspace.is-format-converter .image-drop.is-dragging{
  border-color:#2563eb;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
  transform:translateY(-1px)
}

.format-converter-flow{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border:1px solid rgba(37,99,235,.16);
  border-radius:8px;
  background:linear-gradient(135deg,rgba(239,246,255,.95),rgba(236,254,255,.88))
}
.format-converter-flow__formats{display:flex;align-items:center;gap:12px;white-space:nowrap}
.format-converter-flow__formats strong{
  min-width:58px;
  padding:7px 10px;
  border-radius:5px;
  background:#fff;
  color:#0f3f78;
  box-shadow:0 5px 16px rgba(15,23,42,.07);
  text-align:center
}
.format-converter-flow__formats i{color:#0284c7}
.format-converter-flow>span{font-size:12px;font-weight:750;color:#49647f;text-align:right}

.format-toggle-row{display:flex;align-items:center;gap:9px;min-height:40px}
.format-toggle-row input{width:18px!important;min-height:18px!important;accent-color:#2563eb}
.format-toggle-row b{color:#2563eb}

.format-preview-label{
  display:inline-flex;
  align-items:center;
  gap:7px;
  align-self:flex-start;
  padding:7px 10px;
  border-radius:5px;
  background:#eef6ff;
  color:#1765d8;
  font-size:12px;
  font-weight:850
}
.format-preview-label.is-exact{background:#ecfdf5;color:#047857}
.format-converter-message{
  display:flex;
  flex-direction:column;
  gap:5px;
  width:100%;
  padding:13px 14px;
  border:1px solid rgba(37,99,235,.14);
  border-radius:7px;
  background:rgba(255,255,255,.8);
  text-align:left
}
.format-converter-message b{color:#102a43}
.format-converter-message span{font-size:12px;font-weight:700;color:#526b86}
.format-converter-message.is-error{align-items:center;text-align:center;color:#b42318}
.format-converter-message.is-error b{color:#b42318}

.format-stale-result{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(217,119,6,.24);
  border-radius:6px;
  background:#fffbeb;
  color:#92400e;
  font-size:12px;
  font-weight:800;
  text-align:left
}

.format-result-recommendations{
  width:100%;
  padding:14px;
  border:1px solid rgba(37,99,235,.16);
  border-radius:8px;
  background:linear-gradient(135deg,rgba(239,246,255,.94),rgba(255,255,255,.9));
  text-align:left
}
.format-result-recommendations__heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:11px
}
.format-result-recommendations__heading>span{
  display:flex;
  align-items:center;
  gap:8px;
  color:#102a43;
  font-size:13px;
  font-weight:900
}
.format-result-recommendations__heading>span i{color:#2563eb}
.format-result-recommendations__heading small{
  max-width:290px;
  color:#526b86;
  font-size:11px;
  font-weight:700;
  text-align:right
}
.format-result-recommendations__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.format-next-tool{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:8px 11px!important;
  border:1px solid rgba(37,99,235,.18)!important;
  border-radius:5px!important;
  background:#fff!important;
  color:#1765d8!important;
  font-size:12px;
  font-weight:850;
  text-decoration:none!important;
  box-shadow:0 5px 14px rgba(15,23,42,.05)
}
.format-next-tool:hover{
  border-color:rgba(37,99,235,.46)!important;
  background:#eff6ff!important;
  transform:translateY(-1px)
}

body.theme-dark .format-converter-flow{
  border-color:rgba(96,165,250,.24);
  background:linear-gradient(135deg,rgba(30,41,59,.92),rgba(8,47,73,.66))
}
body.theme-dark .format-converter-flow__formats strong,
body.theme-dark .format-converter-message{background:#0f172a;color:#f8fafc}
body.theme-dark .format-converter-flow__formats strong,
body.theme-dark .format-converter-message b{color:#f8fafc}
body.theme-dark .format-converter-flow>span,
body.theme-dark .format-converter-message span{color:#cbd5e1}
body.theme-dark .format-preview-label{background:rgba(30,64,175,.28);color:#bfdbfe}
body.theme-dark .format-preview-label.is-exact{background:rgba(6,78,59,.38);color:#a7f3d0}
body.theme-dark .format-stale-result{
  border-color:rgba(251,191,36,.28);
  background:rgba(120,53,15,.28);
  color:#fde68a
}
body.theme-dark .format-result-recommendations{
  border-color:rgba(96,165,250,.24);
  background:linear-gradient(135deg,rgba(15,23,42,.9),rgba(30,41,59,.76))
}
body.theme-dark .format-result-recommendations__heading>span{color:#f8fafc}
body.theme-dark .format-result-recommendations__heading small{color:#cbd5e1}
body.theme-dark .format-next-tool{
  border-color:rgba(96,165,250,.25)!important;
  background:#0f172a!important;
  color:#bfdbfe!important
}
body.theme-dark .format-next-tool:hover{background:#172554!important}

@media(max-width:640px){
  .format-converter-flow{align-items:flex-start;flex-direction:column}
  .format-converter-flow>span{text-align:left}
  .format-result-recommendations__heading{flex-direction:column}
  .format-result-recommendations__heading small{text-align:left}
  .format-next-tool{flex:1 1 calc(50% - 8px)}
}
