:root{
    --evci-toast-primary:#283d4e;
    --evci-toast-gold:#dbc164;
    --evci-toast-text:#142130;
    --evci-toast-muted:#6b7280;
    --evci-toast-white:#ffffff;

    --evci-toast-success:#15803d;
    --evci-toast-success-soft:#ecfdf3;
    --evci-toast-success-border:rgba(21,128,61,.14);

    --evci-toast-error:#dc2626;
    --evci-toast-error-soft:#fef2f2;
    --evci-toast-error-border:rgba(220,38,38,.14);

    --evci-toast-warning:#d97706;
    --evci-toast-warning-soft:#fff7ed;
    --evci-toast-warning-border:rgba(217,119,6,.16);

    --evci-toast-info:#2563eb;
    --evci-toast-info-soft:#eff6ff;
    --evci-toast-info-border:rgba(37,99,235,.14);

    --evci-toast-shadow:
        0 20px 40px rgba(15,23,42,.10),
        0 8px 18px rgba(15,23,42,.05);

    --evci-toast-radius:20px;
}

.evci-toast-root{
    position:fixed;
    top:18px;
    right:18px;
    z-index:99999;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:12px;
    pointer-events:none;
}

.evci-toast{
    pointer-events:auto;
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    width:min(390px, calc(100vw - 24px));
    min-height:78px;
    padding:14px 14px 14px 14px;
    border-radius:var(--evci-toast-radius);
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(15,23,42,.06);
    box-shadow:var(--evci-toast-shadow);
    color:var(--evci-toast-text);
    overflow:hidden;
    opacity:0;
    transform:translate3d(0,-10px,0) scale(.98);
    transition:
        opacity .24s ease,
        transform .24s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


.evci-toast.is-show{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
}

.evci-toast.is-hide{
    opacity:0;
    transform:translate3d(0,-8px,0) scale(.985);
}

.evci-toast:hover{
    box-shadow:
        0 24px 48px rgba(15,23,42,.13),
        0 10px 20px rgba(15,23,42,.07);
}

.evci-toast::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:1px;
    background:linear-gradient(90deg, rgba(255,255,255,.6), rgba(255,255,255,.06));
    pointer-events:none;
}

.evci-toast__icon{
    width:46px;
    height:46px;
    flex:0 0 46px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    position:relative;
    margin-top:1px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}

.evci-toast__body{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:1px !important;
    min-width:0;
    padding-top:0;
    margin-top:1px;
}

.evci-toast__title{
    margin:0 !important;
    display:block !important;
    width:100%;
    color:#17202a;
    font-size:14px;
    line-height:1.1;
    font-weight:800;
}

.evci-toast__text{
    margin:5px 0 0;
    font-size:13px;
    line-height:1.55;
    color:var(--evci-toast-muted);
    word-break:break-word;
}

.evci-toast__close{
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:2px;
    border:0;
    border-radius:12px;
    background:rgba(15,23,42,.045);
    color:#64748b;
    cursor:pointer;
    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.evci-toast__close:hover{
    background:rgba(15,23,42,.08);
    color:#334155;
    transform:scale(1.04);
}

.evci-toast__progress{
    position:absolute;
    left:12px;
    right:12px;
    bottom:8px;
    height:3px;
    border-radius:999px;
    background:rgba(15,23,42,.06);
    overflow:hidden;
}

.evci-toast__progress-bar{
    height:100%;
    width:100%;
    border-radius:999px;
    transform-origin:left center;
    animation:evciToastProgress linear forwards;
}

/* SUCCESS */
.evci-toast--success{
    background:linear-gradient(180deg, #ffffff 0%, #fbfffc 100%);
    border-color:var(--evci-toast-success-border);
}

.evci-toast--success .evci-toast__icon{
    background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,.82), transparent 42%),
        linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
    color:var(--evci-toast-success);
}

.evci-toast--success .evci-toast__progress-bar{
    background:linear-gradient(90deg, #22c55e 0%, #15803d 100%);
}

/* ERROR */
.evci-toast--error{
    background:linear-gradient(180deg, #ffffff 0%, #fffafa 100%);
    border-color:var(--evci-toast-error-border);
}

.evci-toast--error .evci-toast__icon{
    background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,.82), transparent 42%),
        linear-gradient(180deg, #fee2e2 0%, #fecaca 100%);
    color:var(--evci-toast-error);
}

.evci-toast--error .evci-toast__progress-bar{
    background:linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}

/* WARNING */
.evci-toast--warning{
    background:linear-gradient(180deg, #ffffff 0%, #fffdf8 100%);
    border-color:var(--evci-toast-warning-border);
}

.evci-toast--warning .evci-toast__icon{
    background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,.82), transparent 42%),
        linear-gradient(180deg, #ffedd5 0%, #fed7aa 100%);
    color:var(--evci-toast-warning);
}

.evci-toast--warning .evci-toast__progress-bar{
    background:linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

/* INFO */
.evci-toast--info{
    background:linear-gradient(180deg, #ffffff 0%, #fafdff 100%);
    border-color:var(--evci-toast-info-border);
}

.evci-toast--info .evci-toast__icon{
    background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,.82), transparent 42%),
        linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
    color:var(--evci-toast-info);
}

.evci-toast--info .evci-toast__progress-bar{
    background:linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
}

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

@media (max-width:767px){
    .evci-toast-root{
        top:12px;
        right:12px;
        left:12px;
        align-items:stretch;
        gap:10px;
    }

    .evci-toast{
        width:100%;
        min-height:72px;
        padding:12px;
        border-radius:18px;
    }

    .evci-toast__icon{
        width:42px;
        height:42px;
        flex-basis:42px;
        border-radius:14px;
        font-size:17px;
    }

    .evci-toast__title{
        font-size:14px;
    }

    .evci-toast__text{
        font-size:12.5px;
    }

    .evci-toast__close{
        width:32px;
        height:32px;
        flex-basis:32px;
        border-radius:11px;
    }

    .evci-toast__progress{
        left:10px;
        right:10px;
        bottom:7px;
    }
}

.evci-toast__content,
.evci-toast-content,
.ev-toast-content{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:3px;
    min-width:0;
}

.evci-toast__title,
.evci-toast-title,
.ev-toast-title{
    display:block;
    width:100%;
    margin:0;
    font-size:13px;
    line-height:1.2;
    font-weight:800;
    color:#17202a;
}

.evci-toast__text,
.evci-toast-text,
.ev-toast-text{
    display:block;
    width:100%;
    margin:0;
    font-size:12.5px;
    line-height:1.45;
    font-weight:500;
    color:#6b7280;
    white-space:normal;
    word-break:break-word;
}

.evci-toast-root{
    position:fixed;
    top:20px;
    right:20px;
    z-index:9999;
    display:flex;
    flex-direction:column;
    gap:12px;
    pointer-events:none;
}

.evci-toast{
    position:relative;
    display:grid;
    grid-template-columns:56px minmax(0,1fr) 40px;
    align-items:start;
    gap:14px;
    min-width:320px;
    max-width:440px;
    padding:18px 18px 16px;
    border-radius:22px;
    background:#ffffff;
    box-shadow:0 18px 40px rgba(15,23,42,.12);
    border:1px solid rgba(15,23,42,.06);
    overflow:hidden;
    pointer-events:auto;
    transform:translateY(-8px);
    opacity:0;
    transition:transform .22s ease, opacity .22s ease;
}

.evci-toast.is-show{
    transform:translateY(0);
    opacity:1;
}

.evci-toast.is-hide{
    transform:translateY(-8px);
    opacity:0;
}

.evci-toast__icon{
    width:56px;
    height:56px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    flex:0 0 56px;
}

.evci-toast--success .evci-toast__icon{
    background:#dff5e7;
    color:#16a34a;
}

.evci-toast--error .evci-toast__icon{
    background:#fee2e2;
    color:#dc2626;
}

.evci-toast--warning .evci-toast__icon{
    background:#fef3c7;
    color:#d97706;
}

.evci-toast--info .evci-toast__icon{
    background:#dbeafe;
    color:#2563eb;
}

.evci-toast__body{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:4px !important;
    min-width:0;
    padding-top:2px;
}

.evci-toast__title{
    margin:0 !important;
    display:block !important;
    width:100%;
    color:#17202a;
    font-size:14px;
    line-height:1.2;
    font-weight:800;
}

.evci-toast__text{
    margin:0 !important;
    display:block !important;
    width:100%;
    color:#6b7280;
    font-size:13px;
    line-height:1.3;
    font-weight:500;
    white-space:normal !important;
    word-break:break-word;
}

.evci-toast__close{
    width:40px;
    height:40px;
    border:0;
    border-radius:14px;
    background:#f3f4f6;
    color:#6b7280;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .18s ease, color .18s ease;
}

.evci-toast__close:hover{
    background:#e5e7eb;
    color:#374151;
}

.evci-toast__progress{
    position:absolute;
    left:16px;
    right:16px;
    bottom:8px;
    height:4px;
    background:#ecfdf3;
    border-radius:999px;
    overflow:hidden;
}

.evci-toast__progress-bar{
    width:100%;
    height:100%;
    transform-origin:left center;
}

.evci-toast--success .evci-toast__progress-bar{
    background:#16a34a;
}

.evci-toast--error .evci-toast__progress-bar{
    background:#dc2626;
}

.evci-toast--warning .evci-toast__progress-bar{
    background:#d97706;
}

.evci-toast--info .evci-toast__progress-bar{
    background:#2563eb;
}

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

@media (max-width: 575px){
    .evci-toast-root{
        top:14px;
        right:12px;
        left:12px;
    }

    .evci-toast {
        position: relative;
        display: grid;
        grid-template-columns:56px minmax(0, 1fr) 40px;
        align-items: center;
        gap: 12px;
        min-width: 320px;
        max-width: 440px;
        padding: 16px 18px 14px;
    }

    .evci-toast__icon{
        width:50px;
        height:50px;
        border-radius:16px;
        font-size:22px;
    }

    .evci-toast__close{
        width:36px;
        height:36px;
        border-radius:12px;
    }

    .evci-toast__title{
        font-size:13.5px;
    }

    .evci-toast__text{
        font-size:12.5px;
    }
}