.mgm-notice-backdrop {
    position: fixed;
    inset: 0;
    z-index: 11950;
    background: rgba(4, 7, 12, .58);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .23s ease;
}

.mgm-notice-backdrop.is-visible {
    opacity: 1;
}

body.mgm-notice-open {
    overflow: hidden;
}

.mgm-notice-region {
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 12000;
    width: min(460px, calc(100vw - 32px));
    pointer-events: none;
}

.mgm-notice {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 30px;
    gap: 14px;
    align-items: start;
    overflow: hidden;
    padding: 19px 17px 21px;
    color: #f7f2e8;
    background:
        radial-gradient(circle at 100% 0, rgba(204, 169, 103, .14), transparent 38%),
        rgba(15, 20, 30, .97);
    border: 1px solid rgba(209, 177, 116, .32);
    border-radius: 4px;
    box-shadow: 0 26px 68px rgba(0, 0, 0, .36);
    backdrop-filter: blur(18px);
    opacity: 0;
    transform: translateY(-14px) scale(.985);
    transition: opacity .24s ease, transform .34s cubic-bezier(.22, 1, .36, 1);
    pointer-events: auto;
}

.mgm-notice::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, #9d7740, #e0c184 58%, #9d7740);
}

.mgm-notice.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.mgm-notice.is-closing {
    opacity: 0;
    transform: translateY(-10px) scale(.985);
}

.mgm-notice-mark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: #101620;
    background: linear-gradient(145deg, #eed39c, #b98b4b);
    border: 1px solid rgba(255, 255, 255, .36);
    font-family: Georgia, "Times New Roman", serif;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .05em;
}

.mgm-notice.is-success .mgm-notice-mark {
    color: #f2fff8;
    background: #2f8064;
}

.mgm-notice.is-error .mgm-notice-mark {
    color: #fff;
    background: #a44742;
}

.mgm-notice-copy small {
    display: block;
    margin: 1px 0 5px;
    color: #d8b978;
    font-size: .67rem;
    font-weight: 850;
    letter-spacing: .13em;
}

.mgm-notice-copy strong {
    display: block;
    margin-bottom: 5px;
    color: #fff;
    font-size: .97rem;
}

.mgm-notice-copy p {
    margin: 0;
    color: rgba(247, 242, 232, .88);
    font-size: .92rem;
    font-weight: 560;
    line-height: 1.62;
    letter-spacing: -.02em;
    white-space: pre-line;
    word-break: keep-all;
}

.mgm-notice-close {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    color: rgba(255, 255, 255, .64);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .08);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.mgm-notice-close:hover,
.mgm-notice-close:focus-visible {
    color: #fff;
    background: rgba(209, 177, 116, .17);
    border-color: rgba(209, 177, 116, .44);
    outline: 2px solid rgba(209, 177, 116, .2);
}

.mgm-notice-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #9d7740, #e0c184 58%, #9d7740);
    transform-origin: left;
    animation: mgm-notice-progress 5.6s linear forwards;
}

@keyframes mgm-notice-progress {
    to { transform: scaleX(0); }
}

.mgm-dialog-scrim {
    position: fixed;
    inset: 0;
    z-index: 12100;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(5, 8, 13, .64);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .23s ease;
}

.mgm-dialog-scrim.is-visible {
    opacity: 1;
}

.mgm-dialog {
    position: relative;
    width: min(440px, 100%);
    padding: 28px;
    color: #f7f2e8;
    background:
        radial-gradient(circle at 100% 0, rgba(204, 169, 103, .13), transparent 36%),
        #111722;
    border: 1px solid rgba(209, 177, 116, .38);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .46);
    transform: translateY(14px) scale(.98);
    transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}

.mgm-dialog::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, #9d7740, #e0c184 58%, #9d7740);
}

.mgm-dialog-scrim.is-visible .mgm-dialog {
    transform: translateY(0) scale(1);
}

.mgm-dialog > small {
    color: #d8b978;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .14em;
}

.mgm-dialog h2 {
    margin: 9px 0 10px;
    color: #fff;
    font-size: 1.38rem;
}

.mgm-dialog p {
    margin: 0;
    color: rgba(247, 242, 232, .74);
    font-size: .94rem;
    line-height: 1.68;
    word-break: keep-all;
}

.mgm-dialog-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 24px;
}

.mgm-dialog-actions button {
    min-height: 48px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.mgm-dialog-cancel {
    color: rgba(255, 255, 255, .78);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
}

.mgm-dialog-confirm {
    color: #16110a;
    background: linear-gradient(135deg, #e4c486, #b48648);
    border: 1px solid #e4c486;
}

body.mgm-dialog-open {
    overflow: hidden;
}

@media (max-width: 560px) {
    .mgm-notice-region {
        top: 12px;
        right: 14px;
        left: 14px;
        width: auto;
    }

    .mgm-notice {
        grid-template-columns: 38px minmax(0, 1fr) 28px;
        gap: 10px;
        padding: 16px 13px 18px;
    }

    .mgm-notice-mark {
        width: 38px;
        height: 38px;
    }

    .mgm-notice-copy p {
        font-size: .86rem;
    }

    .mgm-dialog {
        padding: 23px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mgm-notice,
    .mgm-dialog-scrim,
    .mgm-dialog {
        transition-duration: .01ms !important;
    }

    .mgm-notice-progress {
        animation: none;
    }
}