.ff941-translation-state {
  display: grid;
  gap: .45rem;
  margin-top: .85rem;
  padding: .75rem .8rem;
  border: 1px solid #d7e5ec;
  border-radius: 14px;
  background: #f5fafc;
  color: #15465f;
}

.ff941-translation-summary { display: flex; align-items: center; gap: .5rem; }
.ff941-translation-summary > span {
  display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem;
  border-radius: 999px; background: #e4eef4; font-weight: 900;
}
.ff941-translation-state small { line-height: 1.4; }
.ff941-translation-state.is-complete { border-color: #b9dfca; background: #f0faf4; color: #175a35; }
.ff941-translation-state.is-pending { border-color: #cbdde9; background: #f2f8fc; }
.ff941-translation-state.is-partial,
.ff941-translation-state.is-failed,
.ff941-translation-state.is-missing { border-color: #ead7aa; background: #fff9e9; color: #765110; }
.ff941-translation-error { color: #8f3028; }
.ff941-translation-retry { justify-self: start; min-height: 44px; }

.ff941-translation-confirm { display: grid; gap: 1rem; }
.ff941-translation-confirm dl { display: grid; gap: .65rem; margin: 0; }
.ff941-translation-confirm dl > div { display: grid; gap: .2rem; }
.ff941-translation-confirm dt { color: #587589; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.ff941-translation-confirm dd { margin: 0; color: #133f57; font-weight: 800; }

@media (max-width: 680px) {
  .ff941-translation-retry { width: 100%; }
  .ff941-translation-confirm .form-actions { display: grid; grid-template-columns: 1fr; }
  .ff941-translation-confirm .form-actions .btn { width: 100%; min-height: 48px; }
}