.cloud-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 1900px;
  margin: 8px auto 0;
  padding: 7px 12px;
  border: 1px solid #bed9e0;
  border-radius: 11px;
  background: rgba(239, 250, 252, .94);
  color: #315c6b;
  font-size: 13px;
}
.cloud-status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e5eef0;
  color: #506872;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.cloud-status[data-state="authenticating"], .cloud-status[data-state="loading"], .cloud-status[data-state="syncing"] { background: #fff4da; color: #856225; }
.cloud-status[data-state="synced"] { background: #e6f7ee; color: #26734e; }
.cloud-status[data-state="offline"], .cloud-status[data-state="conflict"] { background: #fff0eb; color: #914b3c; }
.cloud-message { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 5px; }
.cloud-actions button { min-height: 30px; padding: 4px 8px; border: 1px solid #a9cbd2; border-radius: 7px; background: #fff; color: #225970; font-size: 12px; font-weight: 900; }
.cloud-actions button:hover { border-color: #196b93; background: #f5fcfd; }
.cloud-actions button[hidden] { display: none; }
@media (max-width: 999px) {
  .cloud-strip { align-items: flex-start; flex-wrap: wrap; margin: 5px 8px 0; padding: 6px 8px; font-size: 12px; }
  .cloud-message { flex-basis: calc(100% - 96px); white-space: normal; overflow-wrap: anywhere; }
  .cloud-actions { width: 100%; }
  .cloud-actions button { flex: 1 1 auto; }
}