.app-toast {
  position: fixed;
  z-index: 10000;
  top: max(18px, env(safe-area-inset-top));
  left: 50%;
  width: max-content;
  max-width: min(520px, calc(100% - 32px));
  padding: 13px 18px 13px 43px;
  border: 2px solid #172033;
  border-radius: 999px;
  background: #fffdf7;
  color: #172033;
  box-shadow: 5px 5px 0 #172033;
  font: 700 14px/1.4 Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -12px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.app-toast::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #335cff;
  transform: translateY(-50%);
  box-shadow: 0 0 0 4px rgb(51 92 255 / 14%);
}

.app-toast.show { opacity: 1; transform: translate(-50%, 0); }
.app-toast.success::before { background: #08a67a; box-shadow: 0 0 0 4px rgb(8 166 122 / 15%); }
.app-toast.warn::before { background: #f2a900; box-shadow: 0 0 0 4px rgb(242 169 0 / 16%); }
.app-toast.error::before { background: #e54141; box-shadow: 0 0 0 4px rgb(229 65 65 / 14%); }

@media (prefers-reduced-motion: reduce) {
  .app-toast { transition: none; }
}

@media (max-width: 520px) {
  .app-toast {
    width: calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
    max-width: none;
    padding: 12px 14px 12px 42px;
    font-size: 13px;
  }
}