/* Existing AppNotify visual contract, extracted from base.html @ 06433b25. */
.app-notify-layer {
  /* Neutralize only user-agent popover box defaults; the cards are unchanged. */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  right: auto;
  bottom: auto;
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, calc(100vw - 18px));
  display: flex;
  flex-direction: column;
  gap: 9px;
  z-index: 4200;
  pointer-events: none;
}
.app-notice {
  position: relative;
  pointer-events: auto;
  border-radius: 12px;
  border: 1px solid #223043;
  background: rgba(11, 16, 22, 0.96);
  color: #eaf3ec;
  box-shadow: 0 16px 32px rgba(0,0,0,0.38);
  padding: 12px 40px 12px 14px;
  opacity: 0;
  transform: translateY(-18px);
  animation: app-notice-in 0.24s ease forwards;
}
@keyframes app-notice-in {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.app-notice.is-leaving {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.24s ease, transform 0.24s ease;
}
.app-notice.success {
  border-color: rgba(99, 247, 127, 0.5);
  background:
    radial-gradient(circle at 12% 22%, rgba(99, 247, 127, 0.18), transparent 48%),
    linear-gradient(145deg, rgba(12, 24, 17, 0.96), rgba(10, 18, 15, 0.97));
  color: #e8fcee;
}
.app-notice.warning {
  border-color: rgba(255, 179, 93, 0.55);
  background:
    radial-gradient(circle at 12% 22%, rgba(255, 179, 93, 0.2), transparent 48%),
    linear-gradient(145deg, rgba(33, 24, 14, 0.96), rgba(24, 18, 12, 0.97));
  color: #ffe9c9;
}
.app-notice.error,
/* Native auth fallback stays red when React is unavailable. */
.ua-message.ua-message--error {
  border-color: rgba(239, 107, 115, 0.62);
  background:
    radial-gradient(circle at 12% 22%, rgba(239, 107, 115, 0.22), transparent 48%),
    linear-gradient(145deg, rgba(32, 15, 19, 0.97), rgba(22, 12, 15, 0.98));
  color: #ffd6d9;
}
.app-notice-message {
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  white-space: pre-wrap;
  word-break: break-word;
}
.app-notice-action {
  margin-top: 7px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #eaf3ec;
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.app-notice.warning .app-notice-action {
  color: #fff1da;
}
.app-notice.error .app-notice-action {
  color: #ffe1e3;
}
.app-notice-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.26);
  background: rgba(0,0,0,0.24);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  font-size: 14px;
  font-weight: 700;
  box-shadow: none;
}
.app-notice-close:hover {
  border-color: rgba(255,255,255,0.48);
  background: rgba(0,0,0,0.35);
}
.toast-container {
  display: none !important;
  pointer-events: none;
}