.global-cloud-sync-receipt {
  display: grid;
  grid-template-columns: auto minmax(130px, 220px) auto;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid rgba(43, 58, 84, 0.14);
  border-radius: 10px;
  background: #ffffff;
  color: var(--text);
}

.global-cloud-sync-receipt::before,
.cloud-receipt-icon::before {
  content: "○";
  font-weight: 900;
}

.global-cloud-sync-receipt strong,
.global-cloud-sync-receipt span {
  display: block;
}

.global-cloud-sync-receipt strong {
  font-size: 12px;
}

.global-cloud-sync-receipt [data-cloud-receipt-message],
.global-cloud-sync-receipt [data-cloud-receipt-time] {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-cloud-sync-receipt[data-phase="pending"],
.global-cloud-sync-receipt[data-phase="saving"],
.content-cloud-receipt[data-phase="pending"],
.content-cloud-receipt[data-phase="saving"] {
  border-color: rgba(196, 132, 34, 0.38);
  background: #fffaf0;
}

.global-cloud-sync-receipt[data-phase="pending"]::before,
.content-cloud-receipt[data-phase="pending"] .cloud-receipt-icon::before {
  content: "…";
}

.global-cloud-sync-receipt[data-phase="saving"]::before,
.content-cloud-receipt[data-phase="saving"] .cloud-receipt-icon::before {
  content: "↻";
}

.global-cloud-sync-receipt[data-phase="acknowledged"],
.content-cloud-receipt[data-phase="acknowledged"] {
  border-color: rgba(48, 118, 170, 0.4);
  background: #f2f8fd;
}

.global-cloud-sync-receipt[data-phase="acknowledged"]::before,
.content-cloud-receipt[data-phase="acknowledged"] .cloud-receipt-icon::before {
  content: "↑";
}

.global-cloud-sync-receipt[data-phase="verified"],
.content-cloud-receipt[data-phase="verified"] {
  border-color: rgba(39, 139, 91, 0.42);
  background: #f1fbf6;
}

.global-cloud-sync-receipt[data-phase="verified"]::before,
.content-cloud-receipt[data-phase="verified"] .cloud-receipt-icon::before {
  content: "✓";
}

.global-cloud-sync-receipt[data-phase="error"],
.content-cloud-receipt[data-phase="error"] {
  border-color: rgba(194, 65, 65, 0.45);
  background: #fff5f5;
}

.global-cloud-sync-receipt[data-phase="error"]::before,
.content-cloud-receipt[data-phase="error"] .cloud-receipt-icon::before {
  content: "!";
}

.global-cloud-sync-receipt[data-phase="local"]::before,
.content-cloud-receipt[data-phase="local"] .cloud-receipt-icon::before {
  content: "⌂";
}

.content-cloud-receipt {
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) minmax(280px, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 2px solid rgba(43, 58, 84, 0.16);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(43, 58, 84, 0.08);
}

.content-cloud-receipt-main {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.cloud-receipt-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(43, 58, 84, 0.08);
  font-size: 17px;
}

.content-cloud-receipt-main strong,
.content-cloud-receipt-main span,
.content-cloud-receipt-meta strong,
.content-cloud-receipt-meta span {
  display: block;
}

.content-cloud-receipt-main strong {
  font-size: 15px;
}

.content-cloud-receipt-main span,
.content-cloud-receipt-meta span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.content-cloud-receipt-meta strong {
  font-size: 12px;
}

.content-cloud-receipt-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 1180px) {
  .content-cloud-receipt {
    grid-template-columns: 1fr;
  }

  .content-cloud-receipt-actions {
    justify-content: flex-start;
  }
}