.modal-backdrop {
    position: fixed;
    top:0; left:0; right:0; bottom:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:1000;

    background: rgba(0,0,0,0);
    opacity: 0;
    pointer-events: none;

    transition: opacity 0.25s ease;
}

.modal-backdrop.show {
    background: rgba(0,0,0,0.6);
    opacity: 1;
    pointer-events: auto;
}


/* сама коробка модалки */
.modal-box {
    background:#121212;
    border:1px solid #2a2a2a;
    padding:20px;
    border-radius:12px;
    max-width:400px;
    width:90%;
    text-align:center;

    opacity:0;
    transform: translateY(-20px) scale(0.95);
    transition: all 0.25s ease;
}

.modal-box.show {
    opacity:1;
    transform: translateY(0) scale(1);
}

.modal-actions {
    margin-top:20px;
    display:flex;
    justify-content:space-evenly;
}


.modal-actions button {
    width: 100px;
    height: 36px;
    border-radius: 6px;
    font-size:14px;
    font-weight:500;
    border:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition: all 0.18s ease;
}

.modal-actions button:hover{
    box-shadow: 0 0 8px rgba(34,197,94,0.4);
}

.modal-actions .btn-green {
    background:#22c55e;
    color:#fff;
}
.modal-actions .btn-green:hover {
    background:#16a34a;
    box-shadow:0 0 8px rgba(34,197,94,0.4);
}

.modal-actions .btn-danger {
    background:#ef4444;
    color:#fff;
}
.modal-actions .btn-danger:hover {
    background:#dc2626;
    box-shadow:0 0 8px rgba(239,68,68,0.4);
}