/* Feedback: empty state, loading spinner, toast, startup error. */
.empty {
  padding: 65px 25px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 16px;
  grid-column: 1/-1;
}

.empty .spark {
  font-size: 40px;
}

.empty h2 {
  font-size: 21px;
  margin: 15px;
}

.empty p {
  color: var(--muted);
  font-size: 12px;
  line-height: 2;
  margin-bottom: 20px;
}

.loading {
  padding: 60px;
  text-align: center;
  color: var(--muted);
}

.loading:after {
  content: ' ';
  display: block;
  width: 25px;
  height: 25px;
  margin: 20px auto;
  border: 2px solid var(--line);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to{transform:rotate(360deg)};
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  padding: 12px 22px;
  max-width: 90%;
  background: var(--text);
  color: var(--inverse);
  border-radius: 12px;
  box-shadow: var(--shadow);
  font-size: 12px;
  z-index: 1000;
  transition: transform .2s;
  text-align: center;
  pointer-events: none;
}

.toast.visible {
  transform: translateX(-50%) translateY(0);
}

.network-error {
  padding: 80px 30px;
  max-width: 600px;
  margin: auto;
  text-align: center;
  line-height: 2;
}

.network-error button {
  margin-top: 20px;
}