.htmxo-toasts {
    position: fixed; inset-block-end: 1rem; inset-inline-end: 1rem; z-index: 9999;
    display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
    max-width: min(28rem, calc(100vw - 2rem)); pointer-events: none;
}
.htmxo-toast {
    pointer-events: auto; display: flex; align-items: flex-start; gap: .5rem;
    padding: .5rem .4rem .5rem .85rem; border-radius: .3rem; font-size: .9em; line-height: 1.4;
    background: var(--pico-card-background-color, Canvas); color: var(--pico-color, CanvasText);
    border: 1px solid var(--pico-muted-border-color, color-mix(in srgb, currentColor 25%, transparent));
    border-inline-start: .25rem solid var(--htmxo-accent, Highlight);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
    opacity: 0; transform: translateY(.5rem); transition: opacity .25s ease, transform .25s ease;
}
.htmxo-toast-show { opacity: 1; transform: none; }
.htmxo-toast-success { border-inline-start-color: var(--htmxo-success, #2a9d8f); }
.htmxo-toast-error { border-inline-start-color: var(--htmxo-error, #e76f51); }
.htmxo-toast > span { flex: 1; overflow-wrap: anywhere; }
.htmxo-toast > .htmxo-toast-close {
    width: auto; margin: 0; padding: 0 .3rem; border: none; border-radius: .2rem;
    background: transparent; color: inherit; font: inherit; line-height: 1.4;
    box-shadow: none; cursor: pointer; opacity: .7;
}
.htmxo-toast > .htmxo-toast-close:hover, .htmxo-toast > .htmxo-toast-close:focus-visible { opacity: 1; }
.htmxo-toast > .htmxo-toast-close:focus-visible { outline: 2px solid var(--htmxo-accent, Highlight); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .htmxo-toast { transition: none; transform: none; } }