@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;700;800&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 10px;
    padding: 13px 16px;
    background: #181818;
    font-family: 'Syne', sans-serif;
    position: relative;
    overflow: hidden;
    min-width: 300px;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast.success { border-left: 3px solid #246BCE }
.toast.error { border-left: 3px solid #e24b4a }
.toast.warning { border-left: 3px solid #ef9f27 }
.toast.info { border-left: 3px solid #246BCE }

.toast-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast.success .toast-icon { background: rgba(36,107,206,0.15) }
.toast.error .toast-icon { background: #2e1010 }
.toast.warning .toast-icon { background: #2e1e08 }
.toast.info .toast-icon { background: rgba(36,107,206,0.15) }

.toast-icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.toast.success .toast-icon svg { stroke: #246BCE }
.toast.error .toast-icon svg { stroke: #e24b4a }
.toast.warning .toast-icon svg { stroke: #ef9f27 }
.toast.info .toast-icon svg { stroke: #246BCE }

.toast-body {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}

.toast.success .toast-title { color: #246BCE }
.toast.error .toast-title { color: #e24b4a }
.toast.warning .toast-title { color: #ef9f27 }
.toast.info .toast-title { color: #246BCE }

.ph {
    height: 8px;
    border-radius: 4px;
    background: #2a2a2a;
}

.ph.short { width: 55% }
.ph.long { width: 80% }
.ph.xs { width: 35% }

.toast-close {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.3;
}

.toast-close svg {
    width: 11px;
    height: 11px;
    stroke: #fff;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
}

.toast-close:hover { opacity: 0.8 }

.progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    animation: shrink 3s linear forwards;
}

.toast.success .progress { background: #246BCE }
.toast.error .progress { background: #e24b4a }
.toast.warning .progress { background: #ef9f27 }
.toast.info .progress { background: #246BCE }

@keyframes shrink {
    from { width: 100% }
    to { width: 0% }
}