#ogToastContainer {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99999;
  width: min(390px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.og-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14);
  color: #172033;
  transform: translateX(120%);
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
  font-family: Inter, Arial, sans-serif;
}

.og-toast.is-visible { transform: translateX(0); opacity: 1; }
.og-toast.is-leaving { transform: translateX(120%); opacity: 0; }

.og-toast__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-weight: 800;
  font-size: 16px;
}

.og-toast__content { min-width: 0; flex: 1; }
.og-toast__title { margin: 0 0 2px; font-size: 14px; font-weight: 800; }
.og-toast__message { margin: 0; color: #667085; font-size: 13px; line-height: 1.45; }

.og-toast__close {
  border: 0;
  background: transparent;
  color: #98a2b3;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
}

.og-toast--success .og-toast__icon { background: #ecfdf3; color: #079455; }
.og-toast--error .og-toast__icon { background: #fef3f2; color: #d92d20; }
.og-toast--info .og-toast__icon { background: #eff8ff; color: #175cd3; }
.og-toast--warning .og-toast__icon { background: #fffaeb; color: #b54708; }

@media (max-width: 640px) {
  #ogToastContainer { top: 12px; right: 12px; width: calc(100vw - 24px); }
  .og-toast { border-radius: 14px; padding: 13px 14px; }
}