#appNotificationCenter {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10000;
  display: grid;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
  font-family: inherit;
}
.app-notification {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #cbd5e1;
  border-left: 4px solid #64748b;
  border-radius: 10px;
  background: #fff;
  color: #1e293b;
  box-shadow: 0 4px 18px rgb(15 23 42 / 12%);
  pointer-events: auto;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.app-notification > div { flex: 1; min-width: 0; }
.app-notification strong, .app-notification span { display: block; }
.app-notification--good { border-left-color: #15803d; }
.app-notification--bad { border-left-color: #b91c1c; }
.app-notification--warn { border-left-color: #a16207; }
.app-notification--progress { border-left-color: #1d4ed8; }
.app-notification button {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.app-notification button:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
@media (max-width: 600px) { #appNotificationCenter { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); } }