.toast {
  position: fixed;
  left: 50%;
  top: 18px;
  bottom: auto;
  z-index: 100;
  transform: translate(-50%, -18px);
  padding: 11px 18px;
  border: 1px solid #5576a5;
  background: #1e3452;
  color: #edf5ff;
  border-radius: 7px;
  opacity: 0;
  pointer-events: none;
  transition: .2s;
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 8px 24px #0007;
  max-width: min(560px, calc(100vw - 28px));
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { border-color: #e35d68; background: #6e2630; color: #fff1f2; }
.toast.success { border-color: #35b98f; background: #16483f; color: #e4fff6; }
.toast.warning { border-color: #c59645; background: #4a3519; color: #fff0c2; }

/* Errors stay with the field or action that needs attention. */
.local-error {
  position: static;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 7px 0 10px;
  padding: 8px 10px;
  border: 1px solid #99515e;
  border-left: 3px solid #ed8190;
  border-radius: 6px;
  background: #442834;
  color: #ffc4cc;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  flex: 0 0 100%;
  grid-column: 1 / -1;
}
input.has-local-error, select.has-local-error, textarea.has-local-error {
  border-color: #ef8290 !important;
  box-shadow: 0 0 0 2px #ef829024;
}
.auth-card label > .local-error { margin-bottom: 0; }
.history-record > .local-error { margin: 2px 0 0; }
.order-history-item > .local-error { margin: 7px 0 0; }
@media (max-width: 600px) {
  .local-error { font-size: 12px; padding: 7px 9px; }
}