.naretu-notifications {
    position: fixed;
    /* Keep the stack below the sticky navigation instead of underneath it. */
    z-index: 1210;
    top: var(--naretu-notification-top, calc(78px + 1rem));
    right: 1rem;
    width: min(25rem, calc(100vw - 2rem));
    display: grid;
    gap: .75rem;
    pointer-events: none;
}

.naretu-notification {
    --notification-color: #1d6f68;
    --notification-background: #f7fbf9;
    --notification-text: #183b3a;
    --notification-border: #cfe2d7;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem 2.5rem 1rem 1rem;
    overflow: hidden;
    color: var(--notification-text);
    background: var(--notification-background);
    border: 1px solid var(--notification-border);
    border-left: 4px solid var(--notification-color);
    border-radius: .75rem;
    box-shadow: 0 .75rem 2rem rgba(16, 45, 48, .18);
    pointer-events: auto;
    animation: naretu-notification-in 220ms ease-out both;
}

.naretu-notification--success { --notification-color: #168447; --notification-background: #e8f7ed; --notification-text: #0f5c2d; --notification-border: #65bd7f; }
.naretu-notification--error { --notification-color: #c6283c; --notification-background: #fff0f1; --notification-text: #8e1d2b; --notification-border: #df6672; }
.naretu-notification--warning { --notification-color: #a56700; --notification-background: #fff7df; --notification-text: #704800; --notification-border: #e0b34f; }
.naretu-notification--offline { --notification-color: #356a9d; --notification-background: #edf5ff; --notification-text: #244e77; --notification-border: #82acd4; }
.naretu-notification__icon::before { content: "●"; color: var(--notification-color); font-size: 1.05rem; }
.naretu-notification--success .naretu-notification__icon::before { content: "✓"; }
.naretu-notification--error .naretu-notification__icon::before { content: "!"; }
.naretu-notification--warning .naretu-notification__icon::before { content: "⚠"; }
.naretu-notification--offline .naretu-notification__icon::before { content: "⌁"; }
.naretu-notification__content { display: grid; gap: .2rem; min-width: 0; }
.naretu-notification__title { font-size: .9rem; line-height: 1.25; }
.naretu-notification__message { font-size: .85rem; line-height: 1.45; overflow-wrap: anywhere; }
.naretu-notification__close { position: absolute; top: .55rem; right: .55rem; width: 2rem; height: 2rem; border: 0; border-radius: 50%; color: var(--notification-text); background: transparent; font-size: 1.35rem; line-height: 1; cursor: pointer; }
.naretu-notification__close:hover, .naretu-notification__close:focus-visible { color: var(--notification-text); background: rgba(255,255,255,.7); outline: 2px solid var(--notification-color); outline-offset: 1px; }
.naretu-notification__progress { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: var(--notification-color); transform-origin: left; animation: naretu-notification-progress var(--notification-duration, 4000ms) linear both; }
.naretu-notification.is-leaving { animation: naretu-notification-out 180ms ease-in both; }
.naretu-field-error { display: block; margin-top: .35rem; color: #b4232d; font-size: .85rem; }

@keyframes naretu-notification-in { from { opacity: 0; transform: translateY(-.5rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes naretu-notification-out { to { opacity: 0; transform: translateY(-.35rem); } }
@keyframes naretu-notification-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 575.98px) {
    .naretu-notifications { top: var(--naretu-notification-top, calc(70px + .75rem)); right: .75rem; left: .75rem; width: auto; }
    .naretu-notification { padding: .85rem 2.35rem .85rem .85rem; }
}

@media (prefers-color-scheme: dark) {
    .naretu-notification { box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .35); }
}

[data-theme="dark"] .naretu-notification--success { --notification-background: #123d27; --notification-text: #d9f8e3; --notification-border: #3ca869; }
[data-theme="dark"] .naretu-notification--error { --notification-background: #4b1d26; --notification-text: #ffe1e5; --notification-border: #e16b78; }
[data-theme="dark"] .naretu-notification--warning { --notification-background: #4a3711; --notification-text: #ffefbd; --notification-border: #d7a63a; }
[data-theme="dark"] .naretu-notification--offline { --notification-background: #1b3550; --notification-text: #deedff; --notification-border: #6e9fce; }
[data-theme="dark"] .naretu-notification__close:hover,
[data-theme="dark"] .naretu-notification__close:focus-visible { color: #fff; background: rgba(255,255,255,.12); }

@media (prefers-color-scheme: dark) {
    .naretu-notification--success { --notification-background: #123d27; --notification-text: #d9f8e3; --notification-border: #3ca869; }
    .naretu-notification--error { --notification-background: #4b1d26; --notification-text: #ffe1e5; --notification-border: #e16b78; }
    .naretu-notification--warning { --notification-background: #4a3711; --notification-text: #ffefbd; --notification-border: #d7a63a; }
    .naretu-notification--offline { --notification-background: #1b3550; --notification-text: #deedff; --notification-border: #6e9fce; }
    .naretu-notification__close:hover, .naretu-notification__close:focus-visible { color: #fff; background: rgba(255,255,255,.12); }
}

@media (prefers-reduced-motion: reduce) {
    .naretu-notification, .naretu-notification__progress { animation: none; }
}