.rls-notifications {
  --rls-surface: #fff;
  --rls-text: #1f2937;
  --rls-muted: #4b5563;
  --rls-border: #d1d5db;
  --rls-accent: #20574b;
  --rls-on-accent: #fff;
  position: fixed;
  z-index: 12000;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  width: min(370px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  pointer-events: none;
  color: var(--rls-text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
}

.rls-toast-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-height: min(60vh, 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
}

.rls-toast {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  padding: 14px 10px 14px 16px;
  border: 1px solid var(--rls-border);
  border-radius: 12px;
  background: var(--rls-surface);
  box-shadow: 0 5px 22px rgb(0 0 0 / 14%);
  overflow-wrap: anywhere;
}

.rls-toast-content { flex: 1; min-width: 0; }
.rls-toast-title { display: block; color: var(--rls-text); font-size: 14px; }
.rls-toast-description { margin: 5px 0 0; color: var(--rls-muted); font-size: 13px; }

.rls-toast-close {
  flex: 0 0 32px;
  width: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--rls-muted);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.rls-toast-close:hover { background: rgb(127 127 127 / 14%); }

.rls-pending-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  max-width: calc(100vw - 24px);
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--rls-accent);
  color: var(--rls-on-accent);
  box-shadow: 0 3px 14px rgb(0 0 0 / 18%);
  font: inherit;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  pointer-events: auto;
}
.rls-pending-button[hidden] { display: none; }
.rls-pending-button:hover { filter: brightness(1.1); }
.rls-pending-button:disabled { opacity: .7; cursor: wait; }
.rls-pending-label { min-width: 0; overflow-wrap: anywhere; }
.rls-pending-count {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--rls-on-accent);
  color: var(--rls-accent);
  font-size: 12px;
  font-weight: 700;
}
.rls-pending-button:focus-visible,
.rls-toast-close:focus-visible { outline: 3px solid #b7791f; outline-offset: 3px; }

.rl-origin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}
.rl-origin-badge--son { color: #773820; background: #fff0e6; border-color: #d6a58e; }
.rl-origin-badge--oftheson { color: #234f76; background: #eaf4ff; border-color: #91b4d4; }

:is([data-theme="dark"], .dark, .dark-mode) .rls-notifications,
.rls-notifications:is([data-theme="dark"], .dark, .dark-mode) {
  --rls-surface: #202833;
  --rls-text: #f3f4f6;
  --rls-muted: #d1d5db;
  --rls-border: #4b5563;
  --rls-accent: #a9dacb;
  --rls-on-accent: #123d32;
}
:is([data-theme="dark"], .dark, .dark-mode) .rl-origin-badge--son {
  color: #ffd8c2; background: #512f22; border-color: #ad7e68;
}
:is([data-theme="dark"], .dark, .dark-mode) .rl-origin-badge--oftheson {
  color: #d0e9ff; background: #233c56; border-color: #789cbd;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light):not(.light-mode) .rls-notifications {
    --rls-surface: #202833;
    --rls-text: #f3f4f6;
    --rls-muted: #d1d5db;
    --rls-border: #4b5563;
    --rls-accent: #a9dacb;
    --rls-on-accent: #123d32;
  }
  :root:not([data-theme="light"]):not(.light):not(.light-mode) .rl-origin-badge--son {
    color: #ffd8c2; background: #512f22; border-color: #ad7e68;
  }
  :root:not([data-theme="light"]):not(.light):not(.light-mode) .rl-origin-badge--oftheson {
    color: #d0e9ff; background: #233c56; border-color: #789cbd;
  }
}