.it-offline-pending-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .55rem;
  border-radius: 999px;
  background: #fff4d6;
  color: #7a4d00;
  border: 1px solid #f0cf7a;
  font-size: .78rem;
  font-weight: 800;
}

.it-offline-pending-badge::before {
  content: "";
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: currentColor;
}

.it-sync-row em {
  display: block;
  margin-top: .28rem;
  color: #9d2828;
  font-size: .75rem;
  font-style: normal;
  line-height: 1.35;
}

.it-sync-row-btn {
  margin-top: .45rem;
  border: 1px solid #aac7b7;
  background: #fff;
  color: #075f35;
  border-radius: .55rem;
  padding: .38rem .58rem;
  font-size: .74rem;
  font-weight: 800;
  cursor: pointer;
}

.it-sync-row-btn.is-danger {
  border-color: #e6aaaa;
  color: #9a1f1f;
}

.it-sync-conflict-note {
  margin: .65rem 0;
  padding: .7rem .8rem;
  border-radius: .75rem;
  background: #fff2f2;
  color: #8b2323;
  border: 1px solid #efc0c0;
  font-size: .82rem;
  line-height: 1.45;
}

.od-offline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin: 0 0 1rem;
  padding: .85rem;
  border: 1px solid rgba(8,117,58,.18);
  border-radius: .9rem;
  background: rgba(8,117,58,.045);
}

.od-offline-actions button {
  appearance: none;
  border: 1px solid #08753a;
  border-radius: .7rem;
  padding: .7rem .9rem;
  background: #fff;
  color: #075f35;
  font-weight: 800;
  cursor: pointer;
}

.od-offline-actions button.is-primary {
  background: #08753a;
  color: #fff;
}

.od-offline-actions button:disabled {
  opacity: .55;
  cursor: wait;
}

@media (max-width: 720px) {
  .od-offline-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .od-offline-actions button {
    width: 100%;
  }
}