/* Backdrop */
.dl-backdrop {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, #000 65%, transparent);
    backdrop-filter: blur(4px);
    animation: dl-fade .18s ease-out;
    z-index: 1000;
}

/* Modal container */
.dl-modal {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(530px, 92vw);
    background: #0f1216;
    color: #e8edf3;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06) inset;
    padding: 20px 20px 16px;
    z-index: 1001;
    animation: dl-pop .18s cubic-bezier(.17,.67,.3,1.28);
    outline: none;
    height: 225px;
}

.dl-modal-large {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(585px, 92vw);
    background: #0f1216;
    color: #e8edf3;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06) inset;
    padding: 20px 20px 16px;
    z-index: 1001;
    animation: dl-pop .18s cubic-bezier(.17,.67,.3,1.28);
    outline: none;
    height: 225px;
}

/* Header */
.dl-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

    .dl-header h2 {
        font-size: 22px;
        font-weight: 700;
        margin: 0;
        letter-spacing: .2px;
    }

.dl-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: radial-gradient(120% 120% at 0% 0%, #ff7b7b 0%, #ff3d81 50%, #7b4dff 100%);
    box-shadow: 0 8px 24px rgba(255, 61, 129, .35);
}

    .dl-icon svg {
        width: 20px;
        fill: white;
        opacity: .95
    }

/* Body */
.dl-body {
    margin: 6px 4px 14px;
    line-height: 1.55;
}

.dl-email {
    color: #9ad1ff;
    font-weight: 700;
    background: rgba(154, 209, 255, .08);
    padding: 2px 6px;
    border-radius: 8px;
}

.dl-note {
    margin-top: 10px;
    color: #aab3bf;
    font-size: 14px;
}

/* Actions */
.dl-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.dl-btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 600;
    transition: transform .06s ease, box-shadow .15s ease, opacity .15s ease;
}

    .dl-btn:active {
        transform: translateY(1px);
    }

.dl-btn-ghost {
    background: transparent;
    color: #c8d0da;
    box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset;
}

    .dl-btn-ghost:hover {
        box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset;
        color: #fff;
    }

.dl-btn-danger {
    background: linear-gradient(135deg, #ff4d6d, #ff2d55);
    color: white;
    box-shadow: 0 10px 22px rgba(255, 77, 109, .35);
}

    .dl-btn-danger:hover {
        opacity: .95;
        box-shadow: 0 14px 28px rgba(255,77,109,.45);
    }

/* Animations */
@keyframes dl-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes dl-pop {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Small screens */
@media (max-width: 420px) {
    .dl-modal {
        padding: 16px;
    }

    .dl-header h2 {
        font-size: 20px;
    }
}