.toast-viewport {
    position: fixed;
    z-index: 1200;
    width: min(390px, calc(100vw - 32px));
    display: grid;
    gap: 10px;
    inset: 126px 24px auto auto;
    pointer-events: none;
}

.site-toast {
    --toast-accent: var(--color-gold);
    position: relative;
    min-height: 82px;
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    padding: 15px 14px 15px 18px;
    border: 1px solid color-mix(in srgb, var(--color-line) 80%, transparent);
    color: var(--color-ink);
    background: color-mix(in srgb, var(--color-surface) 96%, transparent);
    box-shadow: 0 22px 60px rgb(27 25 22 / 18%);
    backdrop-filter: blur(18px);
    pointer-events: auto;
}

.site-toast--success { --toast-accent: #3f8068; }
.site-toast--error { --toast-accent: #a24c43; }
.site-toast--warning { --toast-accent: #a47b32; }
.site-toast--info { --toast-accent: #657182; }
.site-toast__mark { width: 4px; height: 42px; background: var(--toast-accent); }
.site-toast > div { display: grid; gap: 3px; }
.site-toast strong { font-size: .76rem; font-weight: 600; }
.site-toast p { margin: 0; color: var(--color-muted); font-weight: 600;font-size: 14px;line-height: 1.75; }
.site-toast button { width: 32px; height: 32px; padding: 0; border: 0; color: var(--color-muted); background: transparent; font: inherit; font-size: 1.1rem; cursor: pointer; }
.site-toast__progress { position: absolute; height: 2px; background: var(--toast-accent); inset: auto 0 0; transform-origin: right; animation: toast-progress var(--toast-duration) linear forwards; }

.site-toast-enter-active, .site-toast-leave-active { transition: opacity 240ms var(--ease-luxury), transform 320ms var(--ease-luxury); }
.site-toast-enter-from, .site-toast-leave-to { opacity: 0; transform: translateX(24px); }
@keyframes toast-progress { to { transform: scaleX(0); } }

@media (max-width: 700px) {
    .toast-viewport { width: calc(100vw - 24px); inset: auto 12px 14px; }
    .site-toast { min-height: 76px; }
}

@media (prefers-reduced-motion: reduce) {
    .site-toast-enter-active, .site-toast-leave-active { transition: none; }
    .site-toast__progress { animation: none; }
}