body.modal-show {
    overflow-y: hidden;
}

.modal {
    position: fixed;
    inset: 0;
    background-color: rgb(0 0 0 / 50%);
    backdrop-filter: blur(3px);
    display: grid;
    place-items: center;
    z-index: 20;
}

.modal .card {
    padding: 0;
}

.modal__dialog {
    width: min(90%, 500px);
    box-shadow: var(--shadow-lg);
    background: var(--background-100);
}

.modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 1rem;
    gap: 1rem;
}

.modal__body {
    max-height: 70dvh;
    overflow-y: auto;
    padding: 1rem;
}

.modal__close {
    font-size: 1.3rem;
    padding: 0;
}