.modal {
    background: rgba(15, 23, 42, .48);

    .modal-dialog { margin: 1.5rem auto; }
    .modal-content {
        background: var(--color-surface);
        color: var(--color-text);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        overflow: hidden;
    }
    .modal-header {
        padding: var(--space-4) var(--space-5);
        border-bottom: 1px solid var(--color-border);
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }
    .modal-title { margin: 0; font-size: var(--fs-md); font-weight: 600; }
    .modal-body   { padding: var(--space-5); }
    .modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-5);
        background: var(--color-surface-alt);
        border-top: 1px solid var(--color-border);
    }
    .btn-close {
        background: transparent;
        border: 0;
        font-size: 1.2rem;
        color: var(--color-text-muted);
        cursor: pointer;
        margin-left: auto;

        &:hover { color: var(--color-text); }
    }
}