.notice.toast-notice {
    position: fixed;
    z-index: 10000;
    inset-block-start: 22px;
    inset-inline-start: 50%;
    width: min(92vw, 560px);
    margin: 0;
    padding: 18px 58px 18px 22px;
    transform: translateX(-50%);
    border: 2px solid #111;
    border-radius: 20px !important;
    background: #fff;
    color: #111;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .28);
    font-weight: 800;
    line-height: 1.7;
    animation: toast-enter .28s ease-out both;
}
.notice.toast-notice::before { content: "✓"; margin-inline-end: 10px; }
.notice.toast-notice.error-notice { background: #111; color: #fff; border-color: #fff; }
.notice.toast-notice.error-notice::before { content: "!"; color: #fff; }
.toast-close { position:absolute; inset-inline-end:14px; inset-block-start:50%; transform:translateY(-50%); width:32px; height:32px; border:1px solid currentColor; border-radius:50%; background:transparent; color:inherit; font-size:20px; line-height:1; }
.notice.toast-leave { animation: toast-leave .2s ease-in both; }
@keyframes toast-enter { from { opacity:0; transform:translate(-50%,-22px) scale(.97); } }
@keyframes toast-leave { to { opacity:0; transform:translate(-50%,-18px) scale(.97); } }
@media(max-width:600px){.notice.toast-notice{inset-block-start:12px;padding:15px 52px 15px 18px;border-radius:16px!important;font-size:.92rem}}
@media(prefers-reduced-motion:reduce){.notice.toast-notice,.notice.toast-leave{animation:none}}