.xqw-live-progress {
  position: fixed;
  z-index: 2147483646;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  background: rgba(56, 189, 248, 0.14);
  transition: opacity 160ms ease;
}

.xqw-live-progress::after {
  content: "";
  display: block;
  width: 38%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #38bdf8, #34d399);
  transform: translateX(-120%);
}

.xqw-live-progress.is-active {
  opacity: 1;
}

.xqw-live-progress.is-active::after {
  animation: xqw-live-progress 900ms ease-in-out infinite;
}

.xqw-live-network-busy,
.xqw-live-network-busy * {
  cursor: progress;
}

form[data-live-submitting="true"] {
  opacity: 0.82;
}

form[data-live-submitting="true"] button[type="submit"],
form[data-live-submitting="true"] input[type="submit"] {
  pointer-events: none;
}

.xqw-live-toasts {
  position: fixed;
  z-index: 2147483647;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  display: grid;
  gap: 10px;
  width: min(390px, calc(100vw - 28px));
  pointer-events: none;
}

.xqw-live-toast {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 12px 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 14px;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.96);
  box-shadow: 0 18px 46px rgba(2, 6, 23, 0.28);
  backdrop-filter: blur(16px);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-8px) scale(0.985);
  transition: opacity 180ms ease, transform 180ms ease;
}

.xqw-live-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.xqw-live-toast-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #34d399;
  box-shadow: 0 0 0 5px rgba(52, 211, 153, 0.15);
}

.xqw-live-toast--error .xqw-live-toast-dot {
  background: #fb7185;
  box-shadow: 0 0 0 5px rgba(251, 113, 133, 0.15);
}

.xqw-live-toast--info .xqw-live-toast-dot {
  background: #38bdf8;
  box-shadow: 0 0 0 5px rgba(56, 189, 248, 0.15);
}

.xqw-live-toast-text {
  min-width: 0;
  font: 600 13px/1.45 Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  overflow-wrap: anywhere;
}

.xqw-live-toast-action,
.xqw-live-toast-close {
  appearance: none;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.xqw-live-toast-action {
  padding: 6px 9px;
  border-radius: 8px;
  color: #7dd3fc;
  font: 700 12px/1 Inter, "PingFang SC", sans-serif;
  white-space: nowrap;
}

.xqw-live-toast-action:hover,
.xqw-live-toast-action:focus-visible {
  background: rgba(56, 189, 248, 0.14);
  outline: none;
}

.xqw-live-toast-close {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #94a3b8;
  font: 400 22px/1 sans-serif;
}

.xqw-live-toast-close:hover,
.xqw-live-toast-close:focus-visible {
  color: #f8fafc;
  background: rgba(148, 163, 184, 0.16);
  outline: none;
}

@keyframes xqw-live-progress {
  0% { transform: translateX(-120%); }
  65% { transform: translateX(190%); }
  100% { transform: translateX(290%); }
}

@media (max-width: 640px) {
  .xqw-live-toasts {
    top: max(10px, env(safe-area-inset-top));
    right: 14px;
    left: 14px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xqw-live-progress,
  .xqw-live-progress::after,
  .xqw-live-toast {
    animation: none !important;
    transition: none !important;
  }
}