.sky-toast-region {
    position: fixed;
    z-index: 99999;
    top: 18px;
    right: 18px;
    width: min(390px, calc(100vw - 32px));
    pointer-events: none;
}

.sky-system-toast {
    position: relative;
    width: 100%;
    max-width: none;
    overflow: hidden;
    border: 1px solid rgba(77, 167, 220, .28);
    border-radius: 21px;
    background: linear-gradient(135deg, rgba(241, 250, 255, .97), rgba(218, 241, 255, .97));
    box-shadow: 0 18px 50px rgba(16, 80, 126, .2), inset 0 1px 0 rgba(255, 255, 255, .92);
    color: #164d72;
    pointer-events: auto;
    backdrop-filter: blur(22px) saturate(1.25);
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
}

.sky-system-toast.show {
    animation: skyToastArrive .62s cubic-bezier(.16, 1.35, .3, 1) both;
}

.sky-system-toast.hide {
    animation: skyToastLeave .24s ease both;
}

.sky-system-toast-content {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 11px;
    min-height: 76px;
    padding: 12px 13px;
}

.sky-system-toast-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 14px;
    background: linear-gradient(145deg, #2b96d4, #1677ba);
    box-shadow: 0 8px 18px rgba(20, 119, 182, .24);
    color: #fff;
    font-size: 20px;
}

.sky-system-toast.is-error .sky-system-toast-icon {
    background: linear-gradient(145deg, #4a9ed1, #286f9f);
}

.sky-system-toast-copy {
    display: block;
    min-width: 0;
}

.sky-system-toast-copy strong {
    display: block;
    margin-bottom: 3px;
    color: #0c456e;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .01em;
}

.sky-system-toast .toast-body {
    display: block;
    margin: 0;
    padding: 0;
    color: #52758e;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
}

.sky-system-toast-close {
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .62);
    color: #5d7f96;
    font-size: 15px;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.sky-system-toast-close:hover,
.sky-system-toast-close:focus-visible {
    background: #fff;
    color: #155f91;
    outline: none;
    transform: scale(1.05);
}

.sky-system-toast-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 21px 21px;
    background: linear-gradient(90deg, #65c9f3, #2187c8);
    transform-origin: left center;
}

.sky-system-toast.show .sky-system-toast-progress {
    animation: skyToastProgress 4.5s linear both;
}

@keyframes skyToastArrive {
    0% { opacity: 0; transform: translate3d(38px, -30px, 0) scale(.86); }
    62% { opacity: 1; transform: translate3d(-5px, 2px, 0) scale(1.018); }
    82% { transform: translate3d(2px, 0, 0) scale(.996); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes skyToastLeave {
    to { opacity: 0; transform: translate3d(28px, -10px, 0) scale(.96); }
}

@keyframes skyToastProgress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

html[dir="rtl"] .sky-toast-region {
    right: auto;
    left: 18px;
}

html[dir="rtl"] .sky-system-toast-progress {
    transform-origin: right center;
}

@media (max-width: 520px) {
    .sky-toast-region {
        top: 10px;
        right: 10px;
        width: calc(100vw - 20px);
    }

    html[dir="rtl"] .sky-toast-region {
        right: auto;
        left: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sky-system-toast,
    .sky-system-toast-progress,
    .sky-system-toast * {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}