/* muRED notification design */
#notifier-box {
    position: fixed; top: 24px; right: 24px; z-index: 9999;
    width: 390px; max-width: calc(100vw - 32px); pointer-events: none;
}
#notifier-box .message-box {
    position: relative; box-sizing: border-box; overflow: hidden;
    width: 100%; min-height: 96px; margin: 0 0 14px;
    padding: 18px 50px 18px 70px;
    border: 1px solid #a77332; border-left: 5px solid #d89f3f; border-radius: 7px;
    background: radial-gradient(circle at 92% 12%, rgba(232,173,69,.12), transparent 35%), linear-gradient(135deg,#2b0809,#0d0204);
    box-shadow: 0 18px 48px rgba(0,0,0,.58), inset 0 1px rgba(255,226,171,.07);
    color: #fff7f2; font-family: Arial,Tahoma,sans-serif;
    pointer-events: auto; animation: muredNoticeIn .26s ease-out;
}
#notifier-box .message-box::before {
    content: "!"; position: absolute; top: 50%; left: 17px;
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border: 1px solid #e8bc69; border-radius: 50%;
    background: linear-gradient(145deg,#d43124,#7f0c0b);
    box-shadow: 0 0 20px rgba(226,45,32,.36);
    color: #ffe09a; font-size: 22px; font-weight: 900; line-height: 1;
    transform: translateY(-50%);
}
#notifier-box .message-box.error {
    border-color: #de4938; border-left-color: #ff3e2f;
    background: radial-gradient(circle at 92% 12%,rgba(255,190,72,.12),transparent 35%),linear-gradient(135deg,#5f0d0c,#1b0306);
    box-shadow: 0 18px 48px rgba(0,0,0,.58),0 0 28px rgba(207,38,31,.18),inset 0 1px rgba(255,226,171,.08);
}
#notifier-box .message-box.success { border-color:#69aa45; border-left-color:#68c549; }
#notifier-box .message-box.success::before {
    content:"\2713"; border-color:#b3ec80; background:linear-gradient(145deg,#519f34,#235619);
    color:#dcffbd; box-shadow:0 0 20px rgba(84,177,53,.28);
}
#notifier-box .message-box > .error,
#notifier-box .message-box > .success {
    margin:0 0 7px; padding:0; color:#ffd782;
    font-family:Arial,Tahoma,sans-serif; font-size:17px; font-weight:900;
    letter-spacing:.55px; line-height:1.25; text-transform:uppercase;
}
#notifier-box .message-box > .success { color:#b9f28f; }
#notifier-box .message-box .message-body {
    overflow:hidden; color:#fff7f2; font-size:16px; font-weight:700; line-height:1.5;
    overflow-wrap:anywhere; text-shadow:0 1px 1px rgba(0,0,0,.75);
}
#notifier-box .message-box .message-body span { color:inherit; font:inherit; line-height:inherit; }
#notifier-box .message-box .message-close {
    position:absolute; top:11px; right:11px; z-index:3;
    display:flex; align-items:center; justify-content:center;
    width:28px; height:28px; border:1px solid rgba(255,215,137,.4); border-radius:50%;
    background:rgba(7,1,2,.58); color:#ffe0ae; text-decoration:none; opacity:.9;
}
#notifier-box .message-box .message-close::before { content:"\00d7"; font-size:23px; line-height:1; }
#notifier-box .message-box .message-close:hover,
#notifier-box .message-box .message-close:focus { border-color:#ff6e57; color:#fff; opacity:1; outline:2px solid #ffd782; outline-offset:2px; }
#notifier-box .message-body .thumb { width:48px; height:48px; margin:0 10px 0 0; float:left; border-radius:2px; }
#notifier-box .message-body .thumb img { border-radius:2px; }
@keyframes muredNoticeIn { from { transform:translateX(24px) scale(.97); } to { transform:translateX(0) scale(1); } }
@media(max-width:575px) {
    #notifier-box { top:14px; left:16px; right:16px; width:auto; }
    #notifier-box .message-box { min-height:90px; padding:16px 44px 16px 62px; }
    #notifier-box .message-box::before { left:14px; width:34px; height:34px; font-size:20px; }
    #notifier-box .message-box .message-body { font-size:15px; }
}
@media(prefers-reduced-motion:reduce) { #notifier-box .message-box { animation:none; } }