.pd-notifications { position: fixed; z-index: 2000; top: max(24px, env(safe-area-inset-top)); right: max(24px, env(safe-area-inset-right)); width: 420px; max-width: calc(100% - 32px); display: grid; gap: 12px; pointer-events: none; }
.pd-toast { --toast-accent: #8c252a; position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 18px 14px 20px 18px; overflow: hidden; color: #29272b; background: #fff; border: 1px solid #e5dfe0; border-radius: 12px; box-shadow: 0 10px 36px #28181b26; font: 400 15px/1.5 "Source Sans 3", "Segoe UI", sans-serif; pointer-events: auto; animation: pd-toast-enter .25s ease-out both; }
.pd-toast.pd-toast-success { --toast-accent: #267357; }
.pd-toast.pd-toast-warning { --toast-accent: #976312; }
.pd-toast.pd-toast-error { --toast-accent: #ad3037; }
.pd-toast-icon { color: var(--toast-accent); display: grid; place-items: center; flex: 0 0 24px; }
.pd-toast svg { width: 22px; height: 22px; }
.pd-toast-content { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pd-toast-content p { margin: 0; }
.pd-toast-content a { color: var(--toast-accent); text-decoration: underline; }
body .pd-toast button.pd-toast-close { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; min-height: 30px; margin: -3px -3px 0 0; padding: 4px; border: 0; border-radius: 6px; color: inherit; background: transparent; cursor: pointer; }
body .pd-toast button.pd-toast-close:hover { background: #8c252a12; }
.pd-toast-close:focus-visible { outline: 2px solid var(--toast-accent); outline-offset: 2px; }
.pd-toast-timer { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--toast-accent); transform-origin: left; }
[data-theme="dark"] .pd-toast { --toast-accent: #f1a3aa; background: #25262d; color: #eceef2; border-color: #44414b; box-shadow: 0 10px 36px #0005; }
[data-theme="dark"] .pd-toast.pd-toast-success { --toast-accent: #96d5ad; }
[data-theme="dark"] .pd-toast.pd-toast-warning { --toast-accent: #ecc780; }
[data-theme="dark"] .pd-toast.pd-toast-error { --toast-accent: #ffaaa6; }
@keyframes pd-toast-enter { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 600px) { .pd-notifications { top: max(16px, env(safe-area-inset-top)); right: 16px; } }
@media (prefers-reduced-motion: reduce) { .pd-toast { animation: none; } }