.modal {
    
    position: fixed;

    inset: 0;

    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    padding: 16px;
    
    z-index: 1000;

}

.modal-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 12px;

    padding: 16px 18px;

    border-bottom: 1px solid var(--border);

}

.modal-title {

    font-size: 18px;

    font-weight: 800;

    color: var(--text);

}

.modal-subtitle {

    font-size: 13px;

    margin-top: 4px;

    color: var(--muted);

}

.modal-close {

    border: 0;

    background: transparent;

    font-size: 18px;

    cursor: pointer;

    color: var(--muted);

    padding: 4px 6px;

}

.modal-close:hover {

    color: var(--text);

}

.modal-body {

    padding: 16px;

}

.modal-backdrop {

    position: fixed;
    
    inset: 0;
    
    background: rgba(17,24,39,.45);
    
    backdrop-filter: blur(2px);
    
    z-index: 999;

}

.modal-footer {

    padding: 12px 16px;

    border-top: 1px solid var(--border);

}