:root {
    --site-notification-z: 2147483000;
}

.site-notification-region {
    position: fixed;
    top: calc(var(--site-nav-total-height, var(--site-nav-bar-height, 56px)) + 14px);
    right: calc(var(--site-fixed-right-offset, 0px) + 16px);
    width: min(420px, calc(100vw - 24px));
    display: grid;
    gap: 0.72rem;
    z-index: var(--site-notification-z);
    pointer-events: none;
}

.site-notification-stack {
    display: grid;
    gap: 0.72rem;
}

.site-notification {
    position: relative;
    pointer-events: auto;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(var(--terracotta-rgb), 0.2);
    background:
        radial-gradient(circle at top left, rgba(var(--terracotta-rgb), 0.12), transparent 42%),
        linear-gradient(180deg, rgba(255, 251, 248, 0.97) 0%, rgba(247, 238, 232, 0.98) 100%);
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.14),
        0 0 0 1px rgba(255, 255, 255, 0.18) inset;
    color: #5a382b;
    transform: translateY(-6px);
    opacity: 0;
    transition: opacity 160ms ease, transform 160ms ease;
}

.site-notification.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.site-notification.is-closing {
    opacity: 0;
    transform: translateY(-10px);
}

.site-notification::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: rgba(var(--terracotta-rgb), 0.82);
}

.site-notification__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    padding: 0.92rem 0.98rem 0.92rem 1.05rem;
}

.site-notification__body {
    display: grid;
    gap: 0.26rem;
    min-width: 0;
}

.site-notification__title {
    margin: 0;
    color: #7b4331;
    font-family: "Merriweather", serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.15;
}

.site-notification__message {
    margin: 0;
    color: #4a342a;
    font-size: 0.93rem;
    line-height: 1.38;
    white-space: pre-wrap;
}

.site-notification__details {
    margin: 0;
    color: #7b6155;
    font-size: 0.72rem;
    line-height: 1.3;
    white-space: pre-wrap;
}

.site-notification__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.2rem;
}

.site-notification__action {
    appearance: none;
    border: 1px solid rgba(var(--terracotta-rgb), 0.22);
    background: rgba(255, 255, 255, 0.7);
    color: #6a3a2c;
    border-radius: 999px;
    padding: 0.42rem 0.8rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.site-notification__action:hover,
.site-notification__action:focus-visible {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(var(--terracotta-rgb), 0.34);
    color: #52281b;
    transform: translateY(-1px);
}

.site-notification__action.is-danger {
    border-color: rgba(170, 63, 63, 0.28);
    color: #7d2d2d;
}

.site-notification__close {
    appearance: none;
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid rgba(var(--terracotta-rgb), 0.16);
    background: rgba(255, 255, 255, 0.46);
    color: #7b4331;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.site-notification__close:hover,
.site-notification__close:focus-visible {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(var(--terracotta-rgb), 0.28);
    color: #5f3122;
}

.site-notification--success {
    border-color: rgba(79, 142, 92, 0.22);
    background:
        radial-gradient(circle at top left, rgba(79, 142, 92, 0.12), transparent 42%),
        linear-gradient(180deg, rgba(249, 255, 250, 0.98) 0%, rgba(238, 247, 240, 0.99) 100%);
    color: #26452e;
}

.site-notification--success::before {
    background: rgba(79, 142, 92, 0.86);
}

.site-notification--success .site-notification__title,
.site-notification--success .site-notification__close {
    color: #2f6d3f;
}

.site-notification--success .site-notification__message {
    color: #254833;
}

.site-notification--warning {
    border-color: rgba(225, 177, 44, 0.48);
    background:
        radial-gradient(circle at top left, rgba(255, 210, 74, 0.32), transparent 42%),
        linear-gradient(180deg, rgba(255, 249, 219, 0.99) 0%, rgba(255, 236, 164, 0.99) 100%);
    color: #5d4307;
}

.site-notification--warning::before {
    background: rgba(235, 177, 24, 0.98);
}

.site-notification--warning .site-notification__title,
.site-notification--warning .site-notification__close {
    color: #7b5807;
}

.site-notification--warning .site-notification__message {
    color: #563d05;
}

.site-notification--error {
    border-color: rgba(170, 63, 63, 0.28);
    background:
        radial-gradient(circle at top left, rgba(193, 71, 71, 0.14), transparent 42%),
        linear-gradient(180deg, rgba(255, 248, 248, 0.98) 0%, rgba(252, 234, 234, 0.99) 100%);
    color: #5f2525;
}

.site-notification--error::before {
    background: rgba(180, 74, 74, 0.92);
}

.site-notification--error .site-notification__title,
.site-notification--error .site-notification__close {
    color: #8d3131;
}

.site-notification--error .site-notification__message {
    color: #682d2d;
}

body.site-dark-theme .site-notification,
.auth-portal .site-notification {
    border-color: rgba(var(--terracotta-rgb), 0.18);
    background:
        radial-gradient(circle at top left, rgba(var(--terracotta-rgb), 0.16), transparent 42%),
        linear-gradient(180deg, rgba(39, 28, 24, 0.98) 0%, rgba(25, 18, 15, 0.98) 100%);
    box-shadow:
        0 22px 46px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    color: #f4dfd6;
}

body.site-dark-theme .site-notification__title,
.auth-portal .site-notification__title {
    color: var(--yump-gold);
}

body.site-dark-theme .site-notification__message,
.auth-portal .site-notification__message {
    color: #fff4ef;
}

body.site-dark-theme .site-notification__details,
.auth-portal .site-notification__details {
    color: #d6b8aa;
}

body.site-dark-theme .site-notification__action,
.auth-portal .site-notification__action {
    border-color: rgba(var(--terracotta-rgb), 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: #ffd9ca;
}

body.site-dark-theme .site-notification__action:hover,
body.site-dark-theme .site-notification__action:focus-visible,
.auth-portal .site-notification__action:hover,
.auth-portal .site-notification__action:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(var(--terracotta-rgb), 0.36);
}

body.site-dark-theme .site-notification__action.is-danger,
.auth-portal .site-notification__action.is-danger {
    border-color: rgba(255, 134, 134, 0.28);
    color: #ffbebe;
}

body.site-dark-theme .site-notification__close,
.auth-portal .site-notification__close {
    border-color: rgba(var(--terracotta-rgb), 0.18);
    background: rgba(255, 255, 255, 0.05);
    color: var(--yump-gold);
}

body.site-dark-theme .site-notification__close:hover,
body.site-dark-theme .site-notification__close:focus-visible,
.auth-portal .site-notification__close:hover,
.auth-portal .site-notification__close:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(var(--terracotta-rgb), 0.3);
    color: #ffd9ca;
}

body.site-dark-theme .site-notification--success,
.auth-portal .site-notification--success {
    border-color: rgba(115, 201, 149, 0.24);
    background:
        radial-gradient(circle at top left, rgba(67, 140, 82, 0.18), transparent 42%),
        linear-gradient(180deg, rgba(26, 38, 28, 0.98) 0%, rgba(18, 27, 20, 0.98) 100%);
}

body.site-dark-theme .site-notification--success .site-notification__title,
body.site-dark-theme .site-notification--success .site-notification__close,
.auth-portal .site-notification--success .site-notification__title,
.auth-portal .site-notification--success .site-notification__close {
    color: #bfe3bf;
}

body.site-dark-theme .site-notification--warning,
.auth-portal .site-notification--warning {
    border-color: rgba(255, 216, 86, 0.44);
    background:
        radial-gradient(circle at top left, rgba(255, 214, 82, 0.26), transparent 42%),
        linear-gradient(180deg, rgba(78, 57, 13, 0.98) 0%, rgba(48, 35, 7, 0.98) 100%);
}

body.site-dark-theme .site-notification--error,
.auth-portal .site-notification--error {
    border-color: rgba(255, 134, 134, 0.3);
    background:
        radial-gradient(circle at top left, rgba(170, 63, 63, 0.2), transparent 42%),
        linear-gradient(180deg, rgba(52, 24, 24, 0.98) 0%, rgba(34, 15, 15, 0.98) 100%);
}

body.site-dark-theme .site-notification--warning .site-notification__title,
body.site-dark-theme .site-notification--warning .site-notification__close,
.auth-portal .site-notification--warning .site-notification__title,
.auth-portal .site-notification--warning .site-notification__close {
    color: #ffd983;
}

body.site-dark-theme .site-notification--error .site-notification__title,
body.site-dark-theme .site-notification--error .site-notification__close,
.auth-portal .site-notification--error .site-notification__title,
.auth-portal .site-notification--error .site-notification__close {
    color: #ffb0b0;
}

@media (max-width: 720px) {
    .site-notification-region {
        top: calc(var(--site-nav-total-height, var(--site-nav-bar-height, 56px)) + 10px);
        right: 12px;
        left: 12px;
        width: auto;
    }

    .site-notification__inner {
        padding: 0.84rem 0.88rem 0.84rem 0.94rem;
    }

    .site-notification__message {
        font-size: 0.89rem;
    }
}