.error-message {
  font-size: var(--ls-text-2xl);
  line-height: var(--ls-line-2xl);
  font-weight: 600;
  padding: 0.5rem 0;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--ls-font-primary-color);
  background-color: var(--ls-default-background);
  border-radius: 2px;
  opacity: 1;
  animation: append-animate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform, opacity;
  z-index: 10;
  user-select: none;
  -webkit-user-select: none;
}

.blur {
  filter: blur(10px);
  -webkit-filter: blur(10px);
  user-select: none;
  -webkit-user-select: none;
}

@keyframes append-animate {
  from {
    transform: translateY(-50%) scale(0.96);
    opacity: 0;
  }
  to {
    transform: translateY(-50%) scale(1);
    opacity: 1;
  }
}


:host {
  display: block;
  font-family: var(--ls-font-family);
  position: relative;
  /* Large default keeps layout single-column unless explicitly overridden. */
  --ls-status-grid-breakpoint: 9999px;
}

.content {
  position: relative;
  display: grid;
  gap: var(--ls-status-grid-gap, 2rem);
  padding-inline: var(
    --ls-status-grid-padding-x,
    0
  );
  padding-bottom: var(
    --ls-status-grid-padding-bottom,
    0
  );
  font-size: var(--text-sm, var(--ls-text-sm));
  line-height: var(--text-sm--line-height, var(--ls-line-sm));
  grid-template-columns: 1fr;
}

.content.two-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.content.two-columns > ls-status-item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}